diff --git a/src/assets/logos/monumetric-stacked-white.svg b/src/assets/logos/monumetric-stacked-white.svg new file mode 100644 index 0000000..d1a05bc --- /dev/null +++ b/src/assets/logos/monumetric-stacked-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/logos/ultradent-white.svg b/src/assets/logos/ultradent-white.svg new file mode 100644 index 0000000..cf83929 --- /dev/null +++ b/src/assets/logos/ultradent-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/App.jsx b/src/components/App.jsx index e4d8f4b..6c9fecb 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -17,14 +17,13 @@ import { } from '@react-three/drei'; import { gsap } from 'gsap'; -// import floorTexture from '../assets/textures/texture1.jpg'; -// import floorTextureNormal from '../assets/textures/texture1_normal.jpg'; 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 mac from '../assets/models/mac-draco.glb'; import { SpotLightHelper, DirectionalLightHelper } from 'three'; import logo from '../assets/logos/fd..svg'; +import ultradentLogo from '../assets/logos/ultradent-white.svg'; +import monumetricLogo from '../assets/logos/monumetric-stacked-white.svg'; 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) @@ -50,31 +49,35 @@ const Floor = () => { ); }; -const Dog = ({position, scale}) => { +const Dog = ({position, scale, index}) => { const ref = useRef(); const scroll = useScroll(); const [hovered, setHovered] = useState(false); + const [clicked, setClicked] = 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.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.material.scale[0] = ref.current.scale.x = THREE.MathUtils.damp(ref.current.scale.x, clicked ? 4 : scale[0], 6, delta); + + ref.current.position.x = THREE.MathUtils.damp(ref.current.position.x, clicked ? position[0] + 1 : position[0], 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.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 ); + ref.current.material.color.lerp(new THREE.Color().set(hovered ? 'white' : '#aaa'), hovered ? 0.3 : 0.1); }); return ( - setHovered(true)} onPointerOut={() => setHovered(false)} url="https://picsum.photos/id/237/1920/1024" position={position} rotation={[0, 0, 0]} scale={scale}/> + setClicked(!clicked)} + onPointerOver={() => setHovered(true)} + onPointerOut={() => setHovered(false)} + url="https://picsum.photos/id/237/1920/1028" + position={position} + rotation={[0, 0, 0]} + scale={scale}/> ); }; @@ -207,9 +210,9 @@ const App = () => { - - - + + + {/* @@ -223,16 +226,32 @@ const App = () => { {/* Drei's HTML component can now "hide behind" canvas geometry */} -
setScreenClicked(!screenClicked)} onMouseLeave={() => setScreenClicked(!screenClicked)}> +
-
diff --git a/src/scripts/app.js b/src/scripts/app.js index d0377be..8e09e96 100644 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -11,7 +11,7 @@ render( <> - + diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 389b87f..99ba4e8 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -37,6 +37,17 @@ body { border-radius: 3px; overflow-y: auto; padding: 0; + + &::-webkit-scrollbar { + width: 12px; + background-color: #1a1a1d; + } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgb(63 63 70); + box-shadow: inset 0 0 6px rgb(63 63 70); + } } .wrapper { diff --git a/src/views/index.html b/src/views/index.html index c849b6d..95f546c 100644 --- a/src/views/index.html +++ b/src/views/index.html @@ -11,5 +11,7 @@
+ + \ No newline at end of file