Fixing up/adding things

src/components/App.jsx

@@ -2,36 +2,42 @@ import '../styles/styles.scss';
 import * as THREE from 'three';
 import { useRef, useState } from 'react';
 import { Canvas, useFrame } from '@react-three/fiber';
-import { Text, Environment, MeshReflectorMaterial, useTexture } from '@react-three/drei';
+import { Text, Environment, MeshReflectorMaterial, useTexture, MeshDistortMaterial } from '@react-three/drei';
 import { gsap } from 'gsap';
 
 import dreiVideo from '../assets/videos/drei.mp4';
 import floorTexture from '../assets/textures/texture1.jpg';
 import floorTextureNormal from '../assets/textures/texture1_normal.jpg';
+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={[20, 20]} />
+      <planeGeometry attach='geometry' args={[15, 7]} />
-          <MeshReflectorMaterial
+      <MeshReflectorMaterial
-            blur={[400, 100]}
+        blur={[400, 100]}
-            resolution={2048}
+        resolution={2048}
-            mixBlur={6}
+        mixBlur={6}
-            mirror={1}
+        mirror={1}
-            mixStrength={0.2}
+        mixStrength={0.2}
-            roughnessMap={floor}
+        roughnessMap={floor}
-            roughness={10}
+        roughness={10}
-            metalness={0.4}
+        metalness={0.4}
-            normalMap={normal}
+        normalMap={normal}
-            normalScale={[2, 2]}
+        normalScale={[3, 3]}
-          />
+        depthScale={1.2}
+        minDepthThreshold={0.4}
+        maxDepthThreshold={1.4}
+      />
     </mesh>
   );
 };
 
 const App = () => {
+  const textRef = useRef();
+  const vec = useState(() => new THREE.Vector3());
   const [video] = useState(() => {
     const vid = document.createElement('video');
     vid.src = dreiVideo;
@@ -41,25 +47,49 @@ const App = () => {
     vid.play();
     return vid;
   });
+
+  useFrame((state) => {
+    // state.camera.position.lerp(vec, 0.1);
+  });
   return (
     <>
-      <Canvas concurrent gl={{ alpha: false}} pixelRatio={[1, 1.5]} camera={{ position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
+      <color attach="background" args={["black"]} />
-        <color attach="background" args={['black']} />
+      <fog attach="fog" args={["black", 2.8, 3.5]} />
-        <fog attach="fog" args={['black', 0, 9]} />
+      <group position={[0, -1, 0]}>
-        <group position={[0, -1, 0]}>
+        <Text
-          <Text lineHeight={-0.8} maxWidth={4} fontSize={1} position={[-1, 1.5, -4]} rotation={[0, 0, 0]}>
+          ref={textRef}
-            Designer and Developer
+          font={font}
-            <meshStandardMaterial>
+          textAlign="center"
-              <videoTexture attach="map" args={[video]}/>
+          lineHeight={-0.8}
-            </meshStandardMaterial>
+          maxWidth={3}
-          </Text>
+          fontSize={0.75}
-          <Floor />
+          position={[-2, 1.2, -3.2]}
-        </group>
+          rotation={[0, 0, 0]}
-        <ambientLight intensity={0.5} />
+        >
-        <spotLight position={[0, 0, 0]} intensity={0.3} />
+          Designer &amp; Developer
-        <directionalLight position={[0, 0, 0]} intensity={0.7} />
+          <meshStandardMaterial toneMapped={false}>
-        <Environment preset='city' />
+            <videoTexture
-      </Canvas>
+              attach="map"
+              args={[video]}
+              encoding={THREE.sRGBEncoding}
+            />
+          </meshStandardMaterial>
+        </Text>
+        <mesh position={[2, 1.8, -3.2]}>
+          <sphereBufferGeometry attach="geometry" />
+          <MeshDistortMaterial
+            attach="material"
+            color="#EDEDED"
+            distort={1} // Strength, 0 disables the effect (default=1)
+            speed={2} // Speed (default=1)
+          />
+        </mesh>
+        <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

@@ -1,4 +1,5 @@
 import { Suspense } from 'react';
+import { Canvas } from '@react-three/fiber';
 import { Loader } from '@react-three/drei';
 import { render } from 'react-dom';
 import App from '../components/App';
@@ -6,7 +7,9 @@ import App from '../components/App';
 render(
   <>
     <Suspense fallback={null}>
-      <App />
+      <Canvas gl={{ alpha: false}} pixelRatio={[1, 1.5]} camera={{ position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
+        <App />
+      </Canvas>
     </Suspense>
     <Loader />
   </>,