From 052432666aa3a3b0edcc2d9a99f30e7d72aca798 Mon Sep 17 00:00:00 2001 From: Frank Delaguila Date: Fri, 18 Mar 2022 11:45:18 -0600 Subject: [PATCH] Changing up the scene/adding scrolling and animations --- src/components/App.jsx | 177 ++++++++++++++++++--------------- src/components/MainContent.jsx | 20 ++++ src/scripts/app.js | 15 ++- src/styles/styles.scss | 9 +- src/views/index.html | 3 - tailwind.config.js | 3 + 6 files changed, 143 insertions(+), 84 deletions(-) create mode 100644 src/components/MainContent.jsx diff --git a/src/components/App.jsx b/src/components/App.jsx index 5b83e7c..99c23d5 100644 --- a/src/components/App.jsx +++ b/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 = () => { ); }; -const Dog = ({position, scale}) => { - const ref = useRef(); - const { offset } = useScroll(); +const Dog = forwardRef((props, ref) => { + // const ref = useRef(); + + 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.scale.y = THREE.MathUtils.damp(ref.current.scale.y, hovered ? scale[1] + 0.1 : scale[1], 8, delta); + // ref.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 6; + // 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 ( - setHovered(true)} onPointerOut={() => setHovered(false)} ref={ref} url="https://picsum.photos/id/237/1920/1024" position={position} rotation={[0, 0, 0]} scale={scale}/> + 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 cloudRef = useRef(); - const { width } = useThree( (state) => state.viewport ); - const scroll = useScroll(); - const [video] = useState(() => { - 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 sectionOneRef = useRef(); + const sectionTwoRef = useRef(); + const image1Ref = useRef(); + const image2Ref = useRef(); + const image3Ref = useRef(); 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 ( <> - - - - - - - - - - - - Designer and Developer - - - - - - - - - - - + + + + Designer and Developer + + + + + + Portfolio + + + + + + + + + {/* + + */} + ); }; diff --git a/src/components/MainContent.jsx b/src/components/MainContent.jsx new file mode 100644 index 0000000..b3d6531 --- /dev/null +++ b/src/components/MainContent.jsx @@ -0,0 +1,20 @@ +import logo from '../assets/logos/fd..svg'; + +const MainContent = () => { + + return ( +
+ +
+ ); +}; + +export default MainContent; \ No newline at end of file diff --git a/src/scripts/app.js b/src/scripts/app.js index 195c7f3..39c65d4 100644 --- a/src/scripts/app.js +++ b/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( <> + - - + + + + + + + + + diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 85c57ed..f96971b 100644 --- a/src/styles/styles.scss +++ b/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; diff --git a/src/views/index.html b/src/views/index.html index 3dd56cd..c849b6d 100644 --- a/src/views/index.html +++ b/src/views/index.html @@ -11,8 +11,5 @@
-
- -
\ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 15b08dc..30bd9a6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,6 +4,9 @@ module.exports = { './src/components/**/*.jsx' ], theme: { + container: { + center: true + }, extend: {}, fontFamily: { sans: ['Museo Sans']