fdel/portfolio-redesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working on scroll interactivity, and mouse events

Browse Source
This commit is contained in:
Frank Delaguila
2022-03-15 23:56:59 -06:00
parent 902844cdd1
commit 6c8911796b
3 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/App.jsx
View File

@@ -1,14 +1,15 @@
import '../styles/styles.scss'; import '../styles/styles.scss';
import * as THREE from 'three'; import * as THREE from 'three';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { useFrame } from '@react-three/fiber'; import { useFrame, useThree } from '@react-three/fiber';
import { Text, Environment, MeshReflectorMaterial, useTexture, MeshDistortMaterial, Html } from '@react-three/drei'; import { Text, Environment, MeshReflectorMaterial, useTexture, Html, Image, Scroll, useScroll, ScrollControls } from '@react-three/drei';
import { gsap } from 'gsap'; import { gsap } from 'gsap';
import dreiVideo from '../assets/videos/drei.mp4'; import dreiVideo from '../assets/videos/drei.mp4';
import floorTexture from '../assets/textures/texture1.jpg'; import floorTexture from '../assets/textures/texture1.jpg';
import floorTextureNormal from '../assets/textures/texture1_normal.jpg'; import floorTextureNormal from '../assets/textures/texture1_normal.jpg';
import font from '../assets/fonts/Inter-Bold.woff'; import font from '../assets/fonts/Inter-Bold.woff';
import logo from '../assets/logos/fd..svg';
const Floor = () => { const Floor = () => {
const [floor, normal] = useTexture([floorTexture, floorTextureNormal]); 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 (
<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}/>
);
};
const App = () => { const App = () => {
const textRef = useRef(); const textRef = useRef();
const cloudRef = useRef(); const cloudRef = useRef();
const { width } = useThree( (state) => state.viewport );
const scroll = useScroll();
const [video] = useState(() => { const [video] = useState(() => {
const vid = document.createElement('video'); const vid = document.createElement('video');
vid.src = dreiVideo; vid.src = dreiVideo;
@@ -52,13 +73,19 @@ const App = () => {
gsap.to( cloudRef.current.position, {x: "3"} ); gsap.to( cloudRef.current.position, {x: "3"} );
}; };
useFrame((state) => { const xW = 0.7 + 0.15;
// console.log( state );
});
return ( return (
<> <>
<color attach="background" args={["black"]} /> <color attach="background" args={["black"]} />
<fog attach="fog" args={["black", 1, 4]} /> <fog attach="fog" args={["black", 1, 4]} />
<ScrollControls horizontal damping={10} pages={5}>
<Scroll>
<Dog position={[1.5 * xW, 0.5, -2.5]} scale={[0.7, 2, 1]} />
<Dog position={[2.5 * xW, 0.5, -2.5]} scale={[0.7, 2, 1]} />
<Dog position={[3.5 * xW, 0.5, -2.5]} scale={[0.7, 2, 1]} />
</Scroll>
</ScrollControls>
<group position={[0, -1, 0]}> <group position={[0, -1, 0]}>
<Text <Text
ref={textRef} ref={textRef}
@@ -78,18 +105,12 @@ const App = () => {
/> />
</meshStandardMaterial> </meshStandardMaterial>
</Text> </Text>
<Html position={[-1.5, 1.4, -3.2]} rotation={[0, 0, 0]}> <Html position={[0, 0, 0]} rotation={[0, 0, 0]}>
<h1 onClick={meshAnimation} className="text-4xl font-bold text-white cursor-pointer">HELLO</h1> <nav className="flex items-center justify-center w-100">
<img src={logo} alt="" />
<h1 onClick={meshAnimation} className="text-4xl font-bold text-white cursor-pointer">HELLO</h1>
</nav>
</Html> </Html>
<mesh position={[2, 1.8, -3.2]} ref={cloudRef} fog={false}>
<sphereBufferGeometry attach="geometry" />
<MeshDistortMaterial
attach="material"
color="#EDEDED"
distort={0.5} // Strength, 0 disables the effect (default=1)
speed={1} // Speed (default=1)
/>
</mesh>
<pointLight position={[-1, 0, 0]} /> <pointLight position={[-1, 0, 0]} />
<Floor /> <Floor />
</group> </group>

2
src/scripts/app.js
View File

@@ -7,7 +7,7 @@ import App from '../components/App';
render( render(
<> <>
<Suspense fallback={null}> <Suspense fallback={null}>
<Canvas mode='concurrent' 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 /> <App />
</Canvas> </Canvas>
</Suspense> </Suspense>

2
src/styles/styles.scss
View File

@@ -6,6 +6,8 @@ html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Museo Sans';
overscroll-behavior: none;
} }
#root { #root {