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

Adding in interactions/fixing scrolls

Browse Source
This commit is contained in:
Frank Delaguila
2022-03-20 21:54:09 -06:00
parent 6edb1f92c4
commit 1935e2ed37
4 changed files with 108 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/models/mac-draco.glb Normal file
View File

Binary file not shown.

156
src/components/App.jsx
View File

@@ -22,8 +22,8 @@ import { gsap } from 'gsap';
import font from '../assets/fonts/Inter-Bold.woff'; import font from '../assets/fonts/Inter-Bold.woff';
// import deskScene from '../assets/models/desk_asset/scene.gltf'; // import deskScene from '../assets/models/desk_asset/scene.gltf';
import toyCar from '../assets/models/ToyCar.glb'; import toyCar from '../assets/models/ToyCar.glb';
import m1 from '../assets/models/mbp-v1-pipe.glb'; import mac from '../assets/models/mac-draco.glb';
import { SpotLightHelper } from 'three'; import { SpotLightHelper, DirectionalLightHelper } from 'three';
const rsqw = (t, delta = 0.1, a = 1, f = 1 / (2 * Math.PI)) => (a / Math.atan(1 / delta)) * Math.atan(Math.sin(2 * Math.PI * t * f) / delta) const rsqw = (t, delta = 0.1, a = 1, f = 1 / (2 * Math.PI)) => (a / Math.atan(1 / delta)) * Math.atan(Math.sin(2 * Math.PI * t * f) / delta)
@@ -82,20 +82,42 @@ const App = () => {
const sectionOneRef = useRef(); const sectionOneRef = useRef();
const sectionTwoRef = useRef(); const sectionTwoRef = useRef();
const spotlightRef = useRef(); const spotlightRef = useRef();
useHelper(spotlightRef, SpotLightHelper, 1); const directionalLightRef = useRef();
const lightingTarget = useRef();
const sphereRef = useRef();
const { camera, gl } = useThree();
const [screenClicked, setScreenClicked] = useState(false);
// useHelper( spotlightRef, SpotLightHelper, 1 );
// useHelper( directionalLightRef, DirectionalLightHelper, 1 );
const mbp16 = useRef(); const mbp16 = useRef();
const xW = 0.7 + 0.15; const xW = 0.7 + 0.15;
const [rnd] = useState( () => Math.random() ); const [rnd] = useState( () => Math.random() );
const scroll = useScroll(); const scroll = useScroll();
// const toyCar = useGLTF(toyCar); const { nodes, materials } = useGLTF(mac);
const { nodes, materials } = useGLTF(m1);
useFrame((state, delta) => { useFrame((state, delta) => {
const r1 = scroll.range(0 / 4, 1 / 4); const r1 = scroll.range(0 / 4, 1 / 4);
const r2 = scroll.range(1 / 4, 1 / 4); const r2 = scroll.range(1 / 4, 2 / 4);
sectionOneRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 6; sectionOneRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 8;
sectionTwoRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 6; sectionTwoRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 8;
imageGroupRef.current.position.y = scroll.offset * 10; imageGroupRef.current.position.y = scroll.offset * 14;
if ( !r2 || scroll.range( 2 / 4, 2 / 4 ) ) {
setScreenClicked( false );
gsap.to( state.camera.position, {
z: 0
} );
}
gsap.to( state.camera.position, {
x: screenClicked && r2 ? 0.66 : 0,
z: screenClicked && r2 ? -1.5 : 0
} );
gsap.to( state.camera.rotation, {
y: screenClicked && r2 ? -0.5 : 0
} );
// mbp16.current.rotation.x = Math.PI - (Math.PI / 2) * rsqw(r1) + r2 * 0.33; // mbp16.current.rotation.x = Math.PI - (Math.PI / 2) * rsqw(r1) + r2 * 0.33;
@@ -103,11 +125,9 @@ const App = () => {
gsap.to( sectionOneRef.current.position, {x: -5} ); gsap.to( sectionOneRef.current.position, {x: -5} );
} else { } else {
gsap.to( sectionOneRef.current.position, {x: -1.85} ); gsap.to( sectionOneRef.current.position, {x: -1.85} );
} }
if( scroll.range(1 / 3, 2 / 3) ) { if( scroll.range(1 / 3, 2 / 3) ) {
console.log( sectionOneRef.current );
gsap.to( sectionOneRef.current, { fillOpacity: 0 }); gsap.to( sectionOneRef.current, { fillOpacity: 0 });
gsap.to( sectionTwoRef.current.position, {x: -1.85} ); gsap.to( sectionTwoRef.current.position, {x: -1.85} );
gsap.to( sectionTwoRef.current, {fillOpacity: 1} ); gsap.to( sectionTwoRef.current, {fillOpacity: 1} );
@@ -120,26 +140,39 @@ const App = () => {
return ( return (
<> <>
{/* <OrbitControls /> */} {/* <OrbitControls args={[camera, gl.domElement]} /> */}
<color attach="background" args={["#FAF9F6"]} /> <color attach="background" args={["#FAF9F6"]} />
<fog attach="fog" args={["black", 0, 15]} /> {/* <fog attach="fog" args={["#FAF9F6", 0, 15]} /> */}
<mesh receiveShadow position={[0, 0, -4]} rotation={[0, 0, 0]}> <mesh receiveShadow position={[0, 0, -4]} rotation={[0, 0, 0]}>
<planeGeometry args={[20, 20]} /> <planeGeometry args={[100, 100]} />
<meshStandardMaterial attach="material" /> <meshStandardMaterial attach="material" color="#FAF9F6" />
</mesh> </mesh>
<mesh position={[2, 0, -3]} rotation={[0, 0, 0]}> {/* <mesh ref={sphereRef} receiveShadow castShadow position={[2, 0, -3]}>
<sphereBufferGeometry receiveShadow scale={[0.1, 0.1]} /> <sphereBufferGeometry scale={[0.1, 0.1]} />
<meshStandardMaterial attach="material" color={"pink"} /> <meshStandardMaterial attach="material" color={"pink"} />
</mesh> </mesh> */}
<spotLight <spotLight
shadow-mapSize-width={2048} shadow-mapSize-width={2048}
shadow-mapSize-height={2048} shadow-mapSize-height={2048}
ref={spotlightRef} position={[1, 0, -1.5]} rotation={[0, 0, 0]} intensity={10} castShadow /> ref={spotlightRef}
{/* <directionalLight position={[0, 0, 0]} intensity={0.6} castShadow /> */} position={[-1.5, 0, 3]}
<ambientLight position={[0, 0, -1.5]} intensity={0.5} /> penumbra={0.4}
target={lightingTarget.current}
distance={11}
angle={0.4}
intensity={10}
castShadow />
<directionalLight
ref={directionalLightRef}
position={[-1.5, 1, 2]}
target={lightingTarget.current}
intensity={1}
castShadow />
<pointLight position={[0, 0, 3]} intensity={0.2} />
<ambientLight position={[0, 0, 4]} intensity={0.5} />
<group position={[0, -1, 0]}> <group position={[0, -1, 0]}>
<Text <Text
@@ -148,10 +181,9 @@ const App = () => {
lineHeight={-0.8} lineHeight={-0.8}
maxWidth={3} maxWidth={3}
fontSize={0.8} fontSize={0.8}
position={[-1.85, 1, -3.2]} position={[-1.85, 1, -3]}
rotation={[0, 0, 0]} rotation={[0, 0, 0]}
color={"black"} color={"black"}>
>
Designer and Developer Designer and Developer
<meshStandardMaterial /> <meshStandardMaterial />
</Text> </Text>
@@ -162,60 +194,50 @@ const App = () => {
font={font} font={font}
lineHeight={-0.8} lineHeight={-0.8}
fillOpacity={0} fillOpacity={0}
maxWidth={3} maxWidth={5}
fontSize={0.6} fontSize={0.6}
position={[-5, 1, -3.2]} position={[-5, 1, -3.2]}
rotation={[0, 0, 0]} rotation={[0, 0, 0]}
color={"black"} color={"black"}>
> Experience
Portfolio
<meshStandardMaterial /> <meshStandardMaterial />
</Text> </Text>
</group> </group>
<group ref={imageGroupRef} position={[0, 0, 0]}> <group ref={lightingTarget}>
{/* <Dog position={[1.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} /> <group ref={imageGroupRef} position={[0, 0, 0]}>
<Dog position={[2.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} /> <Dog position={[1.5 * xW, -0.1, -3]} scale={[0.7, 2, 1]} />
<Dog position={[3.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} /> */} <Dog position={[2.5 * xW, -0.1, -3]} scale={[0.7, 2, 1]} />
<Dog position={[3.5 * xW, -0.1, -3]} scale={[0.7, 2, 1]} />
{/* <group rotation={[Math.PI / 2, 0, 0]} position={[1.5, -1, -3]} scale={[0.01, 0.01, 0.01]}> {/* <group rotation={[Math.PI / 2, 0, 0]} position={[1.5, -1, -3]} scale={[0.01, 0.01, 0.01]}>
<mesh receiveShadow castShadow geometry={toyCar.nodes.ToyCar.geometry} /> <mesh receiveShadow castShadow geometry={toyCar.nodes.ToyCar.geometry} />
</group> */} </group> */}
{/*} <group position={[1.5, -6, -3]} rotation={[0, -0.5, 0]} ref={mbp16} dispose={null} scale={[0.2, 0.2, 0.2]}>
<group <group position={[0, 2.85, 0.4]}>
castShadow <group position={[0, 0, 0]} rotation={[Math.PI / 2, 0, 0]}>
ref={mbp16} <mesh castShadow material={materials.aluminium} geometry={nodes['Cube008'].geometry} />
position={[1.5, -1, -3]} <mesh castShadow material={materials['matte.001']} geometry={nodes['Cube008_1'].geometry} />
scale={[0.08, 0.08, 0.08]} <mesh castShadow geometry={nodes['Cube008_2'].geometry}>
dispose={null}> {/* Drei's HTML component can now "hide behind" canvas geometry */}
<group position={[0, -0.43, -11.35]} rotation={[Math.PI / 2, 0, 0]}> <Html onClick={() => setScreenClicked(!screenClicked)} className="content" rotation-x={-Math.PI / 2} position={[0, 0.05, -0.09]} transform occlude>
<mesh <div className="wrapper">
geometry={nodes.back_1.geometry} <h1>Hello</h1>
material={materials.blackmatte} </div>
/> </Html>
<mesh </mesh>
receiveShadow </group>
castShadow </group>
geometry={nodes.back_2.geometry} <mesh castShadow material={materials.keys} geometry={nodes.keyboard.geometry} position={[1.79, 0, 3.45]} />
material={materials.aluminium} <group position={[0, -0.1, 3.39]}>
/> <mesh castShadow material={materials.aluminium} geometry={nodes['Cube002'].geometry} />
<mesh geometry={nodes.matte.geometry}> <mesh material={materials.trackpad} geometry={nodes['Cube002_1'].geometry} />
<meshLambertMaterial map={texture} toneMapped={false} /> </group>
</mesh> <mesh castShadow material={materials.touchbar} geometry={nodes.touchbar.geometry} position={[0, -0.03, 1.2]} />
</group> </group>
<mesh
geometry={nodes.body_1.geometry}
material={materials.aluminium}
material-color="#aaaaaf"
material-envMapIntensity={0.2}
/>
<mesh
geometry={nodes.body_2.geometry}
material={materials.blackmatte}
/>
</group> </group>
*/}
</group> </group>
</> </>
); );

4
src/scripts/app.js
View File

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

17
src/styles/styles.scss
View File

@@ -28,4 +28,21 @@ body {
height: 100%; height: 100%;
z-index: 0; z-index: 0;
} }
}
.content {
width: 334px;
height: 216px;
background: #f0f0f0;
border-radius: 3px;
overflow-y: auto;
padding: 0;
}
.wrapper {
padding: 10px;
width: 668px;
height: 432px;
transform: scale(0.5);
transform-origin: top left;
} }