import type { NextPage } from 'next';
import { Canvas } from '@react-three/fiber';
import { useFrame } from '@react-three/fiber';
import { useRef } from 'react';
const Home: NextPage = () => {
return (
<div className="">
<main className=" w-full h-[100vh]">
<Canvas>
<ambientLight intensity={0.1} />
<directionalLight color="blue" position={[0, 0, 5]} />
<AnimateBox />
</Canvas>
</main>
</div>
);
};
export default Home;
const AnimateBox = () => {
const meshRef = useRef<THREE.Mesh>(null);
useFrame(() => {
if (meshRef.current) {
meshRef.current.rotation.x += 0.01;
meshRef.current.rotation.y += 0.01;
}
});
return (
<mesh ref={meshRef} scale={[1.1, 1.1, 1.1]}>
<boxGeometry />
<meshStandardMaterial />
</mesh>
);
};