From 6c8911796b7d5859226d021c2028b2e42256b0bd Mon Sep 17 00:00:00 2001 From: Frank Delaguila Date: Tue, 15 Mar 2022 23:56:59 -0600 Subject: [PATCH] Working on scroll interactivity, and mouse events --- src/components/App.jsx | 53 +++++++++++++++++++++++++++++------------- src/scripts/app.js | 2 +- src/styles/styles.scss | 2 ++ 3 files changed, 40 insertions(+), 17 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index ccef955..88b4e0a 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -1,14 +1,15 @@ import '../styles/styles.scss'; import * as THREE from 'three'; import { useRef, useState } from 'react'; -import { useFrame } from '@react-three/fiber'; -import { Text, Environment, MeshReflectorMaterial, useTexture, MeshDistortMaterial, Html } from '@react-three/drei'; +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]); @@ -34,9 +35,29 @@ const Floor = () => { ); }; +const Dog = ({position, scale}) => { + const ref = useRef(); + const { offset } = useScroll(); + + const [hovered, setHovered] = useState(false); + + useFrame((state, delta) => { + // 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.9 : scale[0], 6, delta); + ref.current.scale.y = THREE.MathUtils.damp(ref.current.scale.y, hovered ? scale[1] + 0.2 : scale[1], 8, delta); + // 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}/> + ); +}; + 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; @@ -52,13 +73,19 @@ const App = () => { gsap.to( cloudRef.current.position, {x: "3"} ); }; - useFrame((state) => { - // console.log( state ); - }); + const xW = 0.7 + 0.15; + return ( <> + + + + + + + { /> - -

HELLO

+ + - - - - diff --git a/src/scripts/app.js b/src/scripts/app.js index 4c46bc9..195c7f3 100644 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -7,7 +7,7 @@ import App from '../components/App'; render( <> - + diff --git a/src/styles/styles.scss b/src/styles/styles.scss index a3250d7..85c57ed 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -6,6 +6,8 @@ html, body { margin: 0; padding: 0; + font-family: 'Museo Sans'; + overscroll-behavior: none; } #root {