Changing up the scene/adding scrolling and animations

src/components/App.jsx

@@ -1,15 +1,13 @@
 import '../styles/styles.scss';
 import * as THREE from 'three';
-import { useRef, useState } from 'react';
+import { useRef, useState , forwardRef} from 'react';
 import { useFrame, useThree } from '@react-three/fiber';
 import { Text, Environment, MeshReflectorMaterial, useTexture, Html, Image, Scroll, useScroll, ScrollControls } 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';
-import logo from '../assets/logos/fd..svg';
 
 const Floor = () => {
   const [floor, normal] = useTexture([floorTexture, floorTextureNormal]);
@@ -17,104 +15,127 @@ const Floor = () => {
     <mesh rotation={[-Math.PI / 2, 0, 0]}>
       <planeGeometry attach='geometry' args={[15, 7]} />
       <MeshReflectorMaterial
-        blur={[400, 100]}
+        blur={[400, 400]}
-        resolution={2048}
+        color="#1a1a1d"
-        mixBlur={6}
+        resolution={512}
-        mirror={1}
+        mixBlur={7}
-        mixStrength={0.5}
+        args={[10, 10]}
+        mirror={0.5}
+        mixStrength={0.2}
         roughnessMap={floor}
-        roughness={10}
+        metalness={0.4}
-        metalness={0.1}
         normalMap={normal}
-        normalScale={[2, 2]}
+        normalScale={[3, 3]}
-        depthScale={1.2}
-        minDepthThreshold={0.4}
-        maxDepthThreshold={1.4}
       />
     </mesh>
   );
 };
 
-const Dog = ({position, scale}) => {
+const Dog = forwardRef((props, ref) => {
-  const ref = useRef();
+  // const ref = useRef();
-  const { offset } = useScroll();
+
+  const scroll = useScroll();
 
   const [hovered, setHovered] = useState(false);
+  const [rnd] = useState(() => Math.random());
 
   useFrame((state, delta) => {
+    // console.log( r1 );
     // ref.current.position.x = THREE.MathUtils.damp(ref.current.position.x, position[0] - 2, 6, delta);
-    ref.current.scale.x = THREE.MathUtils.damp(ref.current.scale.x, hovered ? 0.75 : scale[0], 6, delta);
+    // ref.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 6;
-    ref.current.scale.y = THREE.MathUtils.damp(ref.current.scale.y, hovered ? scale[1] + 0.1 : scale[1], 8, delta);
+    // if( !scroll.range(1 / 3, 1 / 3) ) {
+    //   ref.current.position.y = scroll.offset * 10;
+    // console.log( props );
+    // }
+    // ref.current.scale.x = THREE.MathUtils.damp(ref.current.scale.x, hovered ? 0.75 : ref.current.scale[0], 6, delta);
+    // ref.current.scale.y = THREE.MathUtils.damp(ref.current.scale.y, hovered ? ref.current.scale[1] + 0.1 : ref.current.scale[1], 8, delta);
+    ref.current.material.grayscale = THREE.MathUtils.damp(ref.current.material.grayscale, hovered ? 0 : 1, 6, delta);
+    ref.current.material.zoom = 1.5 + Math.sin(rnd * 10000 + state.clock.elapsedTime / 3) / 2;
+    ref.current.material.color.lerp(new THREE.Color().set(hovered ? 'white' : '#aaa'), hovered ? 0.3 : 0.1)
     // ref.current.position.x = (position[0] - 1) * scroll.current;
     // console.log( ref.current.position.x );
   });
   return (
-      <Image onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)} ref={ref} url="https://picsum.photos/id/237/1920/1024" position={position} rotation={[0, 0, 0]} scale={scale}/>
+      <Image {...props} ref={ref} onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)} url="https://picsum.photos/id/237/1920/1024" position={props.position} rotation={[0, 0, 0]} scale={props.scale}/>
   );
-};
+});
 
 const App = () => {
-  const textRef = useRef();
+  const sectionOneRef = useRef();
-  const cloudRef = useRef();
+  const sectionTwoRef = useRef();
-  const { width } = useThree( (state) => state.viewport );
+  const image1Ref = useRef();
-  const scroll = useScroll();
+  const image2Ref = useRef();
-  const [video] = useState(() => {
+  const image3Ref = useRef();
-    const vid = document.createElement('video');
-    vid.src = dreiVideo;
-    vid.crossOrigin = "Anonymous";
-    vid.loop = true;
-    vid.muted = true;
-    vid.play();
-    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"} );
-  };
-
   const xW = 0.7 + 0.15;
+  const [rnd] = useState( () => Math.random() );
+  const scroll = useScroll();
+
+  useFrame((state, delta) => {
+    sectionOneRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 6;
+    sectionTwoRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 6;
+    if( scroll.range(1 / 3, 2 / 3) ) {
+      gsap.to( image1Ref.current.position, {y: 5} );
+      gsap.to( image2Ref.current.position, {y: 5} );
+      gsap.to( image3Ref.current.position, {y: 5} );
+      
+      gsap.to( sectionOneRef.current.position, {x: -5} );
+    } else {
+      gsap.to( sectionOneRef.current.position, {x: -1.85} );
+      gsap.to( image1Ref.current.position, {y: -0.1} );
+      gsap.to( image2Ref.current.position, {y: -0.1} );
+      gsap.to( image3Ref.current.position, {y: -0.1} );
+      
+    }
+
+    if( scroll.range(1 / 3, 2 / 3) ) {
+      gsap.to( sectionTwoRef.current.position, {x: -1.85} );
+    } else {
+      gsap.to( sectionTwoRef.current.position, {x: -5} );
+    }
+  });
 
   return (
     <>
-      <color attach="background" args={["black"]} />
+      <color attach="background" args={["#FAF9F6"]} />
-      <fog attach="fog" args={["black", 1, 4]} />
+        <group position={[0, -1, 0]}>
-      <ScrollControls horizontal damping={10} pages={5}>
+            <Text
-        <Scroll>
+              ref={sectionOneRef}
-          <Dog position={[1.5 * xW, 0.2, -2.5]} scale={[0.7, 2, 1]} />
+              font={font}
-          <Dog position={[2.5 * xW, 0.2, -2.5]} scale={[0.7, 2, 1]} />
+              lineHeight={-0.8}
-          <Dog position={[3.5 * xW, 0.2, -2.5]} scale={[0.7, 2, 1]} />
+              maxWidth={3}
-        </Scroll>
+              fontSize={0.8}
-      </ScrollControls>
+              position={[-1.85, 1, -3.2]}
-      <group position={[0, -1, 0]}>
+              rotation={[0, 0, 0]}
-        <Text
+              color={"black"}
-          ref={textRef}
+            >
-          font={font}
+              Designer and Developer
-          lineHeight={-0.8}
+              <meshStandardMaterial />
-          maxWidth={3}
+            </Text>
-          fontSize={1}
+          </group>
-          position={[-1.5, 1.4, -3.2]}
+          <group position={[0, -1, 0]}>
-          rotation={[0, 0, 0]}
+            <Text
-        >
+              ref={sectionTwoRef}
-          Designer and Developer
+              font={font}
-          <meshStandardMaterial toneMapped={false} fog={false}>
+              lineHeight={-0.8}
-            <videoTexture
+              maxWidth={3}
-              attach="map"
+              fontSize={0.6}
-              args={[video]}
+              position={[-5, 1, -3.2]}
-              encoding={THREE.sRGBEncoding}
+              rotation={[0, 0, 0]}
-            />
+              color={"black"}
-          </meshStandardMaterial>
+            >
-        </Text>
+              Portfolio
-        <Html position={[0, 0, 0]} rotation={[0, 0, 0]}>
+              <meshStandardMaterial />
-          <nav className="flex items-center justify-center w-100">
+            </Text>
-            <img src={logo} alt="" />
+          </group>
-            <h1 onClick={meshAnimation} className="text-4xl font-bold text-white cursor-pointer">HELLO</h1>
+
-          </nav>
+          <Dog ref={image1Ref} position={[1.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
-        </Html>
+          <Dog ref={image2Ref} position={[2.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
-        <pointLight position={[-1, 0, 0]} />
+          <Dog ref={image3Ref} position={[3.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
-        <Floor />
+
-      </group>
+          {/* <Dog ref={imageRef} position={[1.5 * xW, -1, -2.5]} scale={[0.7, 2, 1]} />
-      <Environment preset="city" />
+          <Dog ref={imageRef} position={[2.5 * xW, -1, -2.5]} scale={[0.7, 2, 1]} />
+          <Dog ref={imageRef} position={[3.5 * xW, -1, -2.5]} scale={[0.7, 2, 1]} /> */}
+          <Environment preset="city" />
     </>
   );
 };

src/components/MainContent.jsx

@@ -0,0 +1,20 @@
+import logo from '../assets/logos/fd..svg';
+
+const MainContent = () => {
+
+  return (
+    <main className="container">
+      <nav className="flex items-center w-full">
+            <img alt="Frank Delaguila - Designer and Developer Logo (FD.)" className="w-16" src={logo} />
+            <ul className="flex items-center justify-between ml-24 w-64">
+              <li>Home</li>
+              <li>About</li>
+              <li>Portfolio</li>
+              <li>Contact</li>
+            </ul>
+          </nav>
+    </main>
+  );
+};
+
+export default MainContent;

src/scripts/app.js

@@ -2,13 +2,24 @@ import { Suspense } from 'react';
 import { Canvas } from '@react-three/fiber';
 import { Loader } from '@react-three/drei';
 import { render } from 'react-dom';
+import { Scroll, useScroll, ScrollControls } from '@react-three/drei';
+
+import MainContent from '../components/MainContent';
 import App from '../components/App';
 
 render(
   <>
+    <MainContent />
     <Suspense fallback={null}>
-      <Canvas mode='concurrent' gl={{ antialias: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
+      <Canvas mode='concurrent' gl={{ antialias: true }} dpr={[1, 1.5]} camera={{position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
-        <App />
+        <spotLight position={[0, 0, 0]} intensity={10} />
+        <directionalLight color={"red"} position={[0, 0, 0]} intensity={10} />
+        <ambientLight position={[0, 0, -1]} intensity={0.5} />
+        <ScrollControls damping={10} pages={10}>
+          <Scroll>
+            <App />
+          </Scroll>
+        </ScrollControls>
       </Canvas>
     </Suspense>
     <Loader />

src/styles/styles.scss

@@ -4,15 +4,22 @@
 
 html,
 body {
+  position: relative;
   margin: 0;
   padding: 0;
   font-family: 'Museo Sans';
-  overscroll-behavior: none;
 }
 
 #root {
   position: relative;
   height: 100vh;
+  .container {
+    @apply relative py-4 z-50;
+  }
+  nav li {
+    @apply cursor-pointer p-4;
+    color: #1a1a1d;
+  }
   #canvas-container {
     position: absolute;
     top: 0;

src/views/index.html

@@ -11,8 +11,5 @@
 </head>
 <body>
   <div id="root"></div>
-  <main id="main-content">
-    
-  </main>
 </body>
 </html>

tailwind.config.js

@@ -4,6 +4,9 @@ module.exports = {
     './src/components/**/*.jsx'
   ],
   theme: {
+    container: {
+      center: true
+    },
     extend: {},
     fontFamily: {
       sans: ['Museo Sans']