Adding in interactions/fixing scrolls
This commit is contained in:
Frank Delaguila
BIN
src/assets/models/mac-draco.glb
Normal file
BIN
src/assets/models/mac-draco.glb
Normal file
Binary file not shown.
@@ -22,8 +22,8 @@ import { gsap } from 'gsap';
|
||||
import font from '../assets/fonts/Inter-Bold.woff';
|
||||
// import deskScene from '../assets/models/desk_asset/scene.gltf';
|
||||
import toyCar from '../assets/models/ToyCar.glb';
|
||||
import m1 from '../assets/models/mbp-v1-pipe.glb';
|
||||
import { SpotLightHelper } from 'three';
|
||||
import mac from '../assets/models/mac-draco.glb';
|
||||
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)
|
||||
|
||||
@@ -82,20 +82,42 @@ const App = () => {
|
||||
const sectionOneRef = useRef();
|
||||
const sectionTwoRef = 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 xW = 0.7 + 0.15;
|
||||
const [rnd] = useState( () => Math.random() );
|
||||
const scroll = useScroll();
|
||||
// const toyCar = useGLTF(toyCar);
|
||||
const { nodes, materials } = useGLTF(m1);
|
||||
const { nodes, materials } = useGLTF(mac);
|
||||
|
||||
useFrame((state, delta) => {
|
||||
const r1 = scroll.range(0 / 4, 1 / 4);
|
||||
const r2 = scroll.range(1 / 4, 1 / 4);
|
||||
sectionOneRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 6;
|
||||
sectionTwoRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 6;
|
||||
imageGroupRef.current.position.y = scroll.offset * 10;
|
||||
const r2 = scroll.range(1 / 4, 2 / 4);
|
||||
sectionOneRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 8;
|
||||
sectionTwoRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 8;
|
||||
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;
|
||||
|
||||
@@ -103,11 +125,9 @@ const App = () => {
|
||||
gsap.to( sectionOneRef.current.position, {x: -5} );
|
||||
} else {
|
||||
gsap.to( sectionOneRef.current.position, {x: -1.85} );
|
||||
|
||||
}
|
||||
|
||||
if( scroll.range(1 / 3, 2 / 3) ) {
|
||||
console.log( sectionOneRef.current );
|
||||
gsap.to( sectionOneRef.current, { fillOpacity: 0 });
|
||||
gsap.to( sectionTwoRef.current.position, {x: -1.85} );
|
||||
gsap.to( sectionTwoRef.current, {fillOpacity: 1} );
|
||||
@@ -120,26 +140,39 @@ const App = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <OrbitControls /> */}
|
||||
{/* <OrbitControls args={[camera, gl.domElement]} /> */}
|
||||
<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]}>
|
||||
<planeGeometry args={[20, 20]} />
|
||||
<meshStandardMaterial attach="material" />
|
||||
<planeGeometry args={[100, 100]} />
|
||||
<meshStandardMaterial attach="material" color="#FAF9F6" />
|
||||
</mesh>
|
||||
|
||||
<mesh position={[2, 0, -3]} rotation={[0, 0, 0]}>
|
||||
<sphereBufferGeometry receiveShadow scale={[0.1, 0.1]} />
|
||||
{/* <mesh ref={sphereRef} receiveShadow castShadow position={[2, 0, -3]}>
|
||||
<sphereBufferGeometry scale={[0.1, 0.1]} />
|
||||
<meshStandardMaterial attach="material" color={"pink"} />
|
||||
</mesh>
|
||||
</mesh> */}
|
||||
|
||||
<spotLight
|
||||
shadow-mapSize-width={2048}
|
||||
shadow-mapSize-height={2048}
|
||||
ref={spotlightRef} position={[1, 0, -1.5]} rotation={[0, 0, 0]} intensity={10} castShadow />
|
||||
{/* <directionalLight position={[0, 0, 0]} intensity={0.6} castShadow /> */}
|
||||
<ambientLight position={[0, 0, -1.5]} intensity={0.5} />
|
||||
ref={spotlightRef}
|
||||
position={[-1.5, 0, 3]}
|
||||
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]}>
|
||||
<Text
|
||||
@@ -148,10 +181,9 @@ const App = () => {
|
||||
lineHeight={-0.8}
|
||||
maxWidth={3}
|
||||
fontSize={0.8}
|
||||
position={[-1.85, 1, -3.2]}
|
||||
position={[-1.85, 1, -3]}
|
||||
rotation={[0, 0, 0]}
|
||||
color={"black"}
|
||||
>
|
||||
color={"black"}>
|
||||
Designer and Developer
|
||||
<meshStandardMaterial />
|
||||
</Text>
|
||||
@@ -162,60 +194,50 @@ const App = () => {
|
||||
font={font}
|
||||
lineHeight={-0.8}
|
||||
fillOpacity={0}
|
||||
maxWidth={3}
|
||||
maxWidth={5}
|
||||
fontSize={0.6}
|
||||
position={[-5, 1, -3.2]}
|
||||
rotation={[0, 0, 0]}
|
||||
color={"black"}
|
||||
>
|
||||
Portfolio
|
||||
color={"black"}>
|
||||
Experience
|
||||
<meshStandardMaterial />
|
||||
</Text>
|
||||
</group>
|
||||
|
||||
<group ref={lightingTarget}>
|
||||
<group ref={imageGroupRef} position={[0, 0, 0]}>
|
||||
{/* <Dog position={[1.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
|
||||
<Dog position={[2.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
|
||||
<Dog position={[3.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={[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]}>
|
||||
<mesh receiveShadow castShadow geometry={toyCar.nodes.ToyCar.geometry} />
|
||||
</group> */}
|
||||
|
||||
{/*}
|
||||
<group
|
||||
castShadow
|
||||
ref={mbp16}
|
||||
position={[1.5, -1, -3]}
|
||||
scale={[0.08, 0.08, 0.08]}
|
||||
dispose={null}>
|
||||
<group position={[0, -0.43, -11.35]} rotation={[Math.PI / 2, 0, 0]}>
|
||||
<mesh
|
||||
geometry={nodes.back_1.geometry}
|
||||
material={materials.blackmatte}
|
||||
/>
|
||||
<mesh
|
||||
receiveShadow
|
||||
castShadow
|
||||
geometry={nodes.back_2.geometry}
|
||||
material={materials.aluminium}
|
||||
/>
|
||||
<mesh geometry={nodes.matte.geometry}>
|
||||
<meshLambertMaterial map={texture} toneMapped={false} />
|
||||
<group position={[1.5, -6, -3]} rotation={[0, -0.5, 0]} ref={mbp16} dispose={null} scale={[0.2, 0.2, 0.2]}>
|
||||
<group position={[0, 2.85, 0.4]}>
|
||||
<group position={[0, 0, 0]} rotation={[Math.PI / 2, 0, 0]}>
|
||||
<mesh castShadow material={materials.aluminium} geometry={nodes['Cube008'].geometry} />
|
||||
<mesh castShadow material={materials['matte.001']} geometry={nodes['Cube008_1'].geometry} />
|
||||
<mesh castShadow geometry={nodes['Cube008_2'].geometry}>
|
||||
{/* Drei's HTML component can now "hide behind" canvas geometry */}
|
||||
<Html onClick={() => setScreenClicked(!screenClicked)} className="content" rotation-x={-Math.PI / 2} position={[0, 0.05, -0.09]} transform occlude>
|
||||
<div className="wrapper">
|
||||
<h1>Hello</h1>
|
||||
</div>
|
||||
</Html>
|
||||
</mesh>
|
||||
</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>
|
||||
*/}
|
||||
<mesh castShadow material={materials.keys} geometry={nodes.keyboard.geometry} position={[1.79, 0, 3.45]} />
|
||||
<group position={[0, -0.1, 3.39]}>
|
||||
<mesh castShadow material={materials.aluminium} geometry={nodes['Cube002'].geometry} />
|
||||
<mesh material={materials.trackpad} geometry={nodes['Cube002_1'].geometry} />
|
||||
</group>
|
||||
<mesh castShadow material={materials.touchbar} geometry={nodes.touchbar.geometry} position={[0, -0.03, 1.2]} />
|
||||
</group>
|
||||
</group>
|
||||
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -2,7 +2,7 @@ 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 { Scroll, ScrollControls } from '@react-three/drei';
|
||||
|
||||
import MainContent from '../components/MainContent';
|
||||
import App from '../components/App';
|
||||
@@ -11,7 +11,7 @@ render(
|
||||
<>
|
||||
<Suspense fallback={null}>
|
||||
<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}>
|
||||
<Scroll>
|
||||
<App />
|
||||
|
||||
@@ -29,3 +29,20 @@ body {
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user