33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { useFrame, useLoader } from "@react-three/fiber";
|
|
import { forwardRef, useImperativeHandle, useRef } from "react";
|
|
import { Mesh, TextureLoader } from "three";
|
|
|
|
const SealCube = forwardRef<Mesh>((props, ref) => {
|
|
const texture = useLoader(TextureLoader, 'niko/img/niko.jpg');
|
|
const meshRef = useRef<Mesh>(null);
|
|
|
|
useImperativeHandle(ref, () => meshRef.current!, []);
|
|
|
|
useFrame((state, delta) => {
|
|
if (meshRef.current) {
|
|
meshRef.current.rotation.x += delta * 0.5;
|
|
meshRef.current.rotation.y += delta * 0.5;
|
|
meshRef.current.position.y = 3 + Math.sin(state.clock.getElapsedTime() * 1) * 0.15;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<mesh ref={meshRef} position={[0, 3, 0]} castShadow receiveShadow>
|
|
<boxGeometry args={[0.85, 0.85, 0.85]} />
|
|
<meshStandardMaterial
|
|
map={texture}
|
|
roughness={0.4}
|
|
metalness={0.1}
|
|
envMapIntensity={1.2}
|
|
/>
|
|
</mesh>
|
|
);
|
|
});
|
|
SealCube.displayName = 'SealCube';
|
|
|
|
export default SealCube; |