diff --git a/src/components/App.jsx b/src/components/App.jsx
index 5b83e7c..99c23d5 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -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,104 +15,127 @@ const Floor = () => {
);
};
-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 (
- setHovered(true)} onPointerOut={() => setHovered(false)} ref={ref} url="https://picsum.photos/id/237/1920/1024" position={position} rotation={[0, 0, 0]} scale={scale}/>
+ 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 (
<>
-
-
-
-
-
-
-
-
-
-
-
- Designer and Developer
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ Designer and Developer
+
+
+
+
+
+ Portfolio
+
+
+
+
+
+
+
+
+ {/*
+
+ */}
+
);
};
diff --git a/src/components/MainContent.jsx b/src/components/MainContent.jsx
new file mode 100644
index 0000000..b3d6531
--- /dev/null
+++ b/src/components/MainContent.jsx
@@ -0,0 +1,20 @@
+import logo from '../assets/logos/fd..svg';
+
+const MainContent = () => {
+
+ return (
+
+
+
+ );
+};
+
+export default MainContent;
\ No newline at end of file
diff --git a/src/scripts/app.js b/src/scripts/app.js
index 195c7f3..39c65d4 100644
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -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(
<>
+
-
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 85c57ed..f96971b 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -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;
diff --git a/src/views/index.html b/src/views/index.html
index 3dd56cd..c849b6d 100644
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -11,8 +11,5 @@
-
-
-