diff --git a/src/components/App.jsx b/src/components/App.jsx index 4ec8673..cf4b396 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -1,7 +1,7 @@ import '../styles/styles.scss'; import * as THREE from 'three'; import { useRef, useState } from 'react'; -import { Canvas, useFrame } from '@react-three/fiber'; +import { useFrame } from '@react-three/fiber'; import { Text, Environment, MeshReflectorMaterial, useTexture, MeshDistortMaterial } from '@react-three/drei'; import { gsap } from 'gsap'; @@ -13,7 +13,6 @@ import font from '../assets/fonts/Inter-Bold.woff'; const Floor = () => { const [floor, normal] = useTexture([floorTexture, floorTextureNormal]); return ( - // { resolution={2048} mixBlur={6} mirror={1} - mixStrength={0.2} + mixStrength={0.5} roughnessMap={floor} roughness={10} - metalness={0.4} + metalness={0.1} normalMap={normal} - normalScale={[3, 3]} + normalScale={[2, 2]} depthScale={1.2} minDepthThreshold={0.4} maxDepthThreshold={1.4} @@ -37,7 +36,7 @@ const Floor = () => { const App = () => { const textRef = useRef(); - const vec = useState(() => new THREE.Vector3()); + const cloudRef = useRef(); const [video] = useState(() => { const vid = document.createElement('video'); vid.src = dreiVideo; @@ -48,26 +47,30 @@ const App = () => { 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"} ); + }; + useFrame((state) => { - // state.camera.position.lerp(vec, 0.1); + // console.log( state ); }); return ( <> - + - Designer & Developer - + Designer and Developer + { /> - + + - - - ); diff --git a/src/scripts/app.js b/src/scripts/app.js index 6d6d195..4c46bc9 100644 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -7,7 +7,7 @@ import App from '../components/App'; render( <> - +