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

Changing up the scene/adding scrolling and animations

Browse Source
This commit is contained in:
Frank Delaguila
2022-03-18 11:45:18 -06:00
parent 505516ace5
commit 052432666a
6 changed files with 143 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
src/components/App.jsx
View File

@@ -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,103 +15,126 @@ const Floor = () => {
<mesh rotation={[-Math.PI / 2, 0, 0]}>
<planeGeometry attach='geometry' args={[15, 7]} />
<MeshReflectorMaterial
blur={[400, 100]}
resolution={2048}
mixBlur={6}
mirror={1}
mixStrength={0.5}
blur={[400, 400]}
color="#1a1a1d"
resolution={512}
mixBlur={7}
args={[10, 10]}
mirror={0.5}
mixStrength={0.2}
roughnessMap={floor}
roughness={10}
metalness={0.1}
metalness={0.4}
normalMap={normal}
normalScale={[2, 2]}
depthScale={1.2}
minDepthThreshold={0.4}
maxDepthThreshold={1.4}
normalScale={[3, 3]}
/>
</mesh>
);
};
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 (
<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 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 (
<>
<color attach="background" args={["black"]} />
<fog attach="fog" args={["black", 1, 4]} />
<ScrollControls horizontal damping={10} pages={5}>
<Scroll>
<Dog position={[1.5 * xW, 0.2, -2.5]} scale={[0.7, 2, 1]} />
<Dog position={[2.5 * xW, 0.2, -2.5]} scale={[0.7, 2, 1]} />
<Dog position={[3.5 * xW, 0.2, -2.5]} scale={[0.7, 2, 1]} />
</Scroll>
</ScrollControls>
<color attach="background" args={["#FAF9F6"]} />
<group position={[0, -1, 0]}>
<Text
ref={textRef}
ref={sectionOneRef}
font={font}
lineHeight={-0.8}
maxWidth={3}
fontSize={1}
position={[-1.5, 1.4, -3.2]}
fontSize={0.8}
position={[-1.85, 1, -3.2]}
rotation={[0, 0, 0]}
color={"black"}
>
Designer and Developer
<meshStandardMaterial toneMapped={false} fog={false}>
<videoTexture
attach="map"
args={[video]}
encoding={THREE.sRGBEncoding}
/>
</meshStandardMaterial>
<meshStandardMaterial />
</Text>
<Html position={[0, 0, 0]} rotation={[0, 0, 0]}>
<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>
<pointLight position={[-1, 0, 0]} />
<Floor />
</group>
<group position={[0, -1, 0]}>
<Text
ref={sectionTwoRef}
font={font}
lineHeight={-0.8}
maxWidth={3}
fontSize={0.6}
position={[-5, 1, -3.2]}
rotation={[0, 0, 0]}
color={"black"}
>
Portfolio
<meshStandardMaterial />
</Text>
</group>
<Dog ref={image1Ref} position={[1.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
<Dog ref={image2Ref} position={[2.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
<Dog ref={image3Ref} position={[3.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
{/* <Dog ref={imageRef} position={[1.5 * xW, -1, -2.5]} scale={[0.7, 2, 1]} />
<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" />
</>
);

20
src/components/MainContent.jsx Normal file
View File

@@ -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;

13
src/scripts/app.js
View File

@@ -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'}}>
<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 />

9
src/styles/styles.scss
View File

@@ -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;

3
src/views/index.html
View File

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

3
tailwind.config.js
View File

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