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(
<>
-