46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
|
import { Canvas, useFrame, useLoader } from '@react-three/fiber';
|
||
|
|
import { Clone, ContactShadows, OrbitControls } from '@react-three/drei'
|
||
|
|
import { Suspense, useRef } from 'react';
|
||
|
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
||
|
|
|
||
|
|
function Gear(props: any) {
|
||
|
|
const gltf = useLoader(GLTFLoader, './gear.glb');
|
||
|
|
|
||
|
|
const gear1Ref = useRef<any>()
|
||
|
|
const gear2Ref = useRef<any>()
|
||
|
|
|
||
|
|
const speed = 2.5;
|
||
|
|
|
||
|
|
useFrame(({ clock }) => {
|
||
|
|
gear1Ref.current.rotation.z = clock.getElapsedTime() * speed + Math.sin(clock.getElapsedTime()) * speed
|
||
|
|
gear2Ref.current.rotation.z = -clock.getElapsedTime() * speed - Math.sin(clock.getElapsedTime()) * speed
|
||
|
|
})
|
||
|
|
|
||
|
|
return <>
|
||
|
|
<Clone ref={gear1Ref} {...props} object={gltf.scene} />
|
||
|
|
<Clone ref={gear2Ref} position={[2.5,0,0]} {...props} object={gltf.scene} />
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
|
||
|
|
function Renderer() {
|
||
|
|
return (
|
||
|
|
<div className='flex flex-col h-screen gradient'>
|
||
|
|
<Canvas camera={{ position: [-8, 5, 8] }}>
|
||
|
|
<Suspense fallback={null}>
|
||
|
|
<Gear />
|
||
|
|
<ContactShadows
|
||
|
|
scale={60}
|
||
|
|
position={[0, -2, 0]}
|
||
|
|
opacity={2.0}
|
||
|
|
blur={2}
|
||
|
|
resolution={512}
|
||
|
|
/>
|
||
|
|
<OrbitControls target={[0, 0, 0]} maxPolarAngle={Math.PI / 2} />
|
||
|
|
</Suspense>
|
||
|
|
</Canvas>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Renderer
|