diff --git a/src/components/interactivePrism/Beam/Beam.tsx b/src/components/interactivePrism/Beam/Beam.tsx index 0598327..b3fc313 100644 --- a/src/components/interactivePrism/Beam/Beam.tsx +++ b/src/components/interactivePrism/Beam/Beam.tsx @@ -8,7 +8,7 @@ import { useTexture } from "@react-three/drei"; import { Reflect } from "./Reflect"; export const Beam = forwardRef( - ({ children, position, stride = 4, width = 8, ...props }, fRef) => { + ({ children, position, stride = 3, width = 12, ...props }, fRef) => { const streaks = useRef(null); const glow = useRef(null); const reflect = useRef(null); @@ -88,7 +88,7 @@ export const Beam = forwardRef( diff --git a/src/components/interactivePrism/Prism.tsx b/src/components/interactivePrism/Prism.tsx index 84db56a..9870ffb 100644 --- a/src/components/interactivePrism/Prism.tsx +++ b/src/components/interactivePrism/Prism.tsx @@ -26,17 +26,19 @@ export function Prism({ onRayOver, onRayOut, onRayMove, ...props }) { diff --git a/src/components/interactivePrism/Rainbow.tsx b/src/components/interactivePrism/Rainbow.tsx index 47edb0a..7ae3684 100644 --- a/src/components/interactivePrism/Rainbow.tsx +++ b/src/components/interactivePrism/Rainbow.tsx @@ -120,7 +120,7 @@ export const Rainbow = forwardRef( const material = useRef(null); const { width, height } = useThree((state) => state.viewport); // calculate the maximum length the rainbow has to have to reach all screen corners - const length = Math.hypot(width, height) + 1.5; // add 1.5 to due motion of the rainbow + const length = Math.hypot(width, height) + 2.5; // add 1.5 to due motion of the rainbow useFrame( (state, delta) => (material.current.time += delta * material.current.speed), @@ -135,7 +135,7 @@ export const Rainbow = forwardRef( startRadius={startRadius} endRadius={endRadius} ratio={1} - toneMapped={false} + toneMapped={true} /> ); diff --git a/src/components/interactivePrism/Sphere.tsx b/src/components/interactivePrism/Sphere.tsx new file mode 100644 index 0000000..2313440 --- /dev/null +++ b/src/components/interactivePrism/Sphere.tsx @@ -0,0 +1,49 @@ +/* eslint-disable */ +// @ts-nocheck + +import { useLoader } from "@react-three/fiber"; +import { GLTFLoader } from "three-stdlib"; +import { SphereGeometry } from "three"; + +export function Prism({ onRayOver, onRayOut, onRayMove, ...props }) { + const { nodes } = useLoader( + GLTFLoader, + "https://uploads.codesandbox.io/uploads/user/b3e56831-8b98-4fee-b941-0e27f39883ab/xxpI-prism.glb", + ); + + // Create a sphere geometry + const sphereGeometry = new SphereGeometry(1, 32, 32); + + return ( + + {/* A low-res, invisible representation of the prism that gets hit by the raycaster */} + + + + {/* The visible hi-res prism */} + + + + + ); +} diff --git a/src/components/interactivePrism/index.tsx b/src/components/interactivePrism/index.tsx index f0e09d1..3bad388 100644 --- a/src/components/interactivePrism/index.tsx +++ b/src/components/interactivePrism/index.tsx @@ -23,8 +23,8 @@ export function lerpV3(value, goal, speed = 0.1) { export function calculateRefractionAngle( incidentAngle, - glassIor = 2.5, - airIor = 1.000293, + glassIor = 5, + airIor = 0.300293, ) { const theta = Math.asin((airIor * Math.sin(incidentAngle)) / glassIor) || 0; return theta; @@ -44,7 +44,7 @@ export default function InteractivePrism({ @@ -52,9 +52,9 @@ export default function InteractivePrism({ @@ -76,8 +76,8 @@ function Scene() { e.stopPropagation(); hitPrism(true); // Set the intensity really high on first contact. - rainbow.current.material.speed = 1; - rainbow.current.material.emissiveIntensity = 20; + rainbow.current.material.speed = 2.5; + rainbow.current.material.emissiveIntensity = 50; }, []); const vec = new THREE.Vector3(); @@ -86,7 +86,7 @@ function Scene() { // Extend the line to the prisms center. vec.toArray(api.positions, api.number++ * 3); // Set flare. - flare.current.position.set(position.x, position.y, -0.5); + flare.current.position.set(position.x, position.y, -1); flare.current.rotation.set(0, 0, -Math.atan2(direction.x, direction.y)); // Calculate refraction angles. @@ -133,7 +133,7 @@ function Scene() { spot.current.intensity = rainbow.current.material.emissiveIntensity; // Animate ambience. - lerp(ambient.current, "intensity", 0, 0.025); + lerp(ambient.current, "intensity", 0, 0.25); }); return ( @@ -145,30 +145,30 @@ function Scene() { {/* Prism + blocks + reflect beam */} - + {/* Rainbow and flares */} - + );