1. 마우스를 따라오는 3D 객체

import React, { useEffect, useRef } from "react";
import { useFrame, useLoader } from "@react-three/fiber";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
import {
  CANVAS_FILE_PATH,
  CanvasObjectConstants,
} from "@/constants/canvasConst";
import * as THREE from "three";

const CanvasObject = () => {
  const obj = useLoader(STLLoader, CANVAS_FILE_PATH);
  const meshRef = useRef(null) as any;
  const {
    mesh,
    material: { color, emissiveIntensity, roughness, metalness },
  } = CanvasObjectConstants;
 
  useFrame(
    ({ pointer }) =>
      (meshRef.current.rotation.y = THREE.MathUtils.lerp(
        meshRef.current.rotation.y,
        pointer.x * (Math.PI / 5),
        0.01
      ))
  );
  return (
    <mesh ref={meshRef} geometry={obj} position={mesh.position}>
      <meshStandardMaterial
        color={color}
        emissiveIntensity={emissiveIntensity}
        roughness={roughness}
        metalness={metalness}
      />
    </mesh>
  );
};

export default CanvasObject;