diff --git a/src/assets/models/mac-draco.glb b/src/assets/models/mac-draco.glb
new file mode 100644
index 0000000..2c25bdc
Binary files /dev/null and b/src/assets/models/mac-draco.glb differ
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 2b84b61..b1cf1fe 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -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 (
<>
- {/* */}
+ {/* */}
-
+ {/* */}
-
-
+
+
-
-
+ {/*
+
-
+ */}
- {/* */}
-
+ ref={spotlightRef}
+ position={[-1.5, 0, 3]}
+ penumbra={0.4}
+ target={lightingTarget.current}
+ distance={11}
+ angle={0.4}
+ intensity={10}
+ castShadow />
+
+
+
{
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
@@ -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
-
- {/*
-
- */}
+
+
+
+
+
- {/*
-
- */}
+ {/*
+
+ */}
- {/*}
-
-
-
-
-
-
-
+
+
+
+
+
+
+ {/* Drei's HTML component can now "hide behind" canvas geometry */}
+ setScreenClicked(!screenClicked)} className="content" rotation-x={-Math.PI / 2} position={[0, 0.05, -0.09]} transform occlude>
+
+
Hello
+
+
+
+
+
+
+
+
+
+
+
-
-
- */}
+
);
diff --git a/src/scripts/app.js b/src/scripts/app.js
index 6fd7bb4..d0377be 100644
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -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(
<>
-