Adding changes

src/components/App.jsx

@@ -1,7 +1,7 @@
 import '../styles/styles.scss';
 import * as THREE from 'three';
 import { useRef, useState } from 'react';
-import { Canvas, useFrame } from '@react-three/fiber';
+import { useFrame } from '@react-three/fiber';
 import { Text, Environment, MeshReflectorMaterial, useTexture, MeshDistortMaterial } from '@react-three/drei';
 import { gsap } from 'gsap';
 
@@ -13,7 +13,6 @@ import font from '../assets/fonts/Inter-Bold.woff';
 const Floor = () => {
   const [floor, normal] = useTexture([floorTexture, floorTextureNormal]);
   return (
-    // <MeshReflectorMaterial blur={[400, 100]} resolution={512} args={[10, 10]} mirror={0.5} mixBlur={6} mixStrength={1.5} rotation={[0, 0, 0]} color="#a0a0a0" metalness={0.4} roughnessMap={floor} normalMap={normal} normalScale={[2, 2]} />
     <mesh rotation={[-Math.PI / 2, 0, 0]}>
       <planeGeometry attach='geometry' args={[15, 7]} />
       <MeshReflectorMaterial
@@ -21,12 +20,12 @@ const Floor = () => {
         resolution={2048}
         mixBlur={6}
         mirror={1}
-        mixStrength={0.2}
+        mixStrength={0.5}
         roughnessMap={floor}
         roughness={10}
-        metalness={0.4}
+        metalness={0.1}
         normalMap={normal}
-        normalScale={[3, 3]}
+        normalScale={[2, 2]}
         depthScale={1.2}
         minDepthThreshold={0.4}
         maxDepthThreshold={1.4}
@@ -37,7 +36,7 @@ const Floor = () => {
 
 const App = () => {
   const textRef = useRef();
-  const vec = useState(() => new THREE.Vector3());
+  const cloudRef = useRef();
   const [video] = useState(() => {
     const vid = document.createElement('video');
     vid.src = dreiVideo;
@@ -48,26 +47,30 @@ const App = () => {
     return vid;
   });
 
+  const meshAnimation = () => {
+    gsap.to( cloudRef.current.scale, {x: "1.2", y: "1.2", z: "1.2" } );
+    gsap.to( cloudRef.current.position, {x: "3"} );
+  };
+
   useFrame((state) => {
-    // state.camera.position.lerp(vec, 0.1);
+    // console.log( state );
   });
   return (
     <>
       <color attach="background" args={["black"]} />
-      <fog attach="fog" args={["black", 2.8, 3.5]} />
+      <fog attach="fog" args={["black", 1, 4]} />
       <group position={[0, -1, 0]}>
         <Text
           ref={textRef}
           font={font}
-          textAlign="center"
           lineHeight={-0.8}
           maxWidth={3}
-          fontSize={0.75}
+          fontSize={1}
-          position={[-2, 1.2, -3.2]}
+          position={[-1.5, 1.4, -3.2]}
           rotation={[0, 0, 0]}
         >
-          Designer &amp; Developer
+          Designer and Developer
-          <meshStandardMaterial toneMapped={false}>
+          <meshStandardMaterial toneMapped={false} fog={false}>
             <videoTexture
               attach="map"
               args={[video]}
@@ -75,20 +78,18 @@ const App = () => {
             />
           </meshStandardMaterial>
         </Text>
-        <mesh position={[2, 1.8, -3.2]}>
+        <mesh position={[2, 1.8, -3.2]} ref={cloudRef} onPointerEnter={meshAnimation} fog={false}>
           <sphereBufferGeometry attach="geometry" />
           <MeshDistortMaterial
             attach="material"
             color="#EDEDED"
-            distort={1} // Strength, 0 disables the effect (default=1)
+            distort={0.5} // Strength, 0 disables the effect (default=1)
-            speed={2} // Speed (default=1)
+            speed={1} // Speed (default=1)
           />
         </mesh>
+        <pointLight position={[-1, 0, 0]} />
         <Floor />
       </group>
-      <ambientLight position={[0, 0, -1]} intensity={0.5} />
-      <spotLight position={[0, 0, 0]} intensity={0.3} />
-      <directionalLight position={[0, 0, 0]} intensity={0.7} />
       <Environment preset="city" />
     </>
   );

src/scripts/app.js

@@ -7,7 +7,7 @@ import App from '../components/App';
 render(
   <>
     <Suspense fallback={null}>
-      <Canvas gl={{ alpha: false}} pixelRatio={[1, 1.5]} camera={{ position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
+      <Canvas mode='concurrent' dpr={[1, 1.5]} camera={{ position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
         <App />
       </Canvas>
     </Suspense>