Formulas Corrected + screen space reflection

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(
           <planeGeometry />
           <meshBasicMaterial
             map={streakTexture}
-            opacity={1.5}
+            opacity={2.5}
             {...config}
             transparent={false}
           />

src/components/interactivePrism/Prism.tsx

@@ -26,17 +26,19 @@ export function Prism({ onRayOver, onRayOut, onRayMove, ...props }) {
       <mesh
         position={[0, 0, 0.6]}
         renderOrder={10}
-        scale={2}
+        scale={6}
         dispose={null}
         geometry={nodes.Cone.geometry}
       >
         <meshPhysicalMaterial
-          clearcoat={1}
+          clearcoat={1.5}
           clearcoatRoughness={0}
           transmission={1}
-          thickness={0.9}
+          thickness={1}
           roughness={0}
-          toneMapped={false}
+          toneMapped={true}
+          // luminanceSmoothing={true}
+          smoothstep={10}
         />
       </mesh>
     </group>

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}
         />
       </mesh>
     );

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 (
+    <group {...props}>
+      {/* A low-res, invisible representation of the prism that gets hit by the raycaster */}
+      <mesh
+        visible={false}
+        scale={1.9}
+        rotation={[Math.PI / 2, Math.PI, 0]}
+        onRayOver={onRayOver}
+        onRayOut={onRayOut}
+        onRayMove={onRayMove}
+      >
+        <cylinderGeometry args={[1, 1, 1, 3, 1]} />
+      </mesh>
+      {/* The visible hi-res prism */}
+      <mesh
+        position={[6, 0, 0.6]}
+        renderOrder={10}
+        scale={6}
+        dispose={null}
+        geometry={sphereGeometry} // Use the sphere geometry
+      >
+        <meshPhysicalMaterial
+          clearcoat={1}
+          clearcoatRoughness={0}
+          transmission={1}
+          thickness={0.9}
+          roughness={0}
+          toneMapped={false}
+        />
+      </mesh>
+    </group>
+  );
+}

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,17 +44,17 @@ export default function InteractivePrism({
       <Canvas
         orthographic
         gl={{ antialias: false }}
-        camera={{ position: [0, 0, 20], zoom: 50 }}
+        camera={{ position: [0, 0, 20], zoom: 65 }}
       >
         <color attach="background" args={[bgColor]} />
         <Scene />
         <EffectComposer disableNormalPass>
           <Bloom
             mipmapBlur
             levels={9}
-            intensity={1.5}
-            luminanceThreshold={1}
-            luminanceSmoothing={1}
+            intensity={2}
+            luminanceThreshold={1.5}
+            luminanceSmoothing={2}
           />
         </EffectComposer>
       </Canvas>
@@ -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() {
       <pointLight position={[-10, 0, 0]} intensity={0.05} />
       <spotLight
         ref={spot}
-        intensity={1}
+        intensity={10}
         distance={7}
         angle={1}
         penumbra={1}
         position={[0, 0, 1]}
       />
       {/* Prism + blocks + reflect beam */}
-      <Beam ref={boxreflect} bounce={10} far={20}>
+      <Beam ref={boxreflect} bounce={10} far={20} position={[0, 0, 0]}>
         <Prism
           scale={0.6}
-          position={[0, -0.5, 0]}
           onRayOver={rayOver}
           onRayOut={rayOut}
           onRayMove={rayMove}
         />
       </Beam>
       {/* Rainbow and flares */}
-      <Rainbow ref={rainbow} startRadius={0} endRadius={0.5} fade={0} />
+      <Rainbow ref={rainbow} startRadius={0} endRadius={0.8} fade={0} position={[0, 0, 0]}/>
       <Flare
+        position={[0, 0, 0]}
         ref={flare}
-        visible={isPrismHit}
+        visible={true}
         renderOrder={10}
         scale={1.25}
-        streak={[12.5, 20, 1]}
+        streak={[18.5, 20, 1]}
       />
     </>
   );