[3D] R3F

• mesh : r3f에서 랜더링할 3차원 모델을 mesh라고 한다.

• rotation : 회전하는 각도를 radian으로 하기 위해서 (Math.PI) / 180를 하고 있는데 THREE.MathUtils.degToRad(45)로 해도 똑같은 결과를 얻을 수 있다.

• useFrame

  • 매 프레임마다 mesh에 rotation값을 변경해줘야하는데 매 프레임이 랜더링되기 이전에 호출되는 콜백함수를 정의하기 위해서 r3f에서는 useFrame라는 hook을 제공한다.
  • delta인자는 이전 프레임과 현재 프레임 사이의 경과 시간

• directionalLight : 조명

• axesHelper : x,y,z선

• OrbitControls : 마우스로 3d요소 움직일수 하기위해 컨트롤 install(휠을 이용해서 확대축소도 된다.)

• boxGeometry : 모양

• meshStandardMaterial : 재질

• 첫줄에 /eslint-disable react/no-unknown-property/ 추가해야 프로퍼티없다는 메세지 안씀(주석포함 작성)

import { OrbitControls } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { useRef } from "react";
import * as THREE from "three";

function MYElement3D() {
  const refMesh = useRef();

  useFrame((state, delta) => {
    refMesh.current.rotation.z += delta;
  });
  return (
    <>
      
      <directionalLight position={(1, 1, 1)} />
      <axesHelper scale={10} />
      <OrbitControls />

      <mesh
        ref={refMesh}
        position={[0, 2, 0]}
        rotation={[0, 0, THREE.MathUtils.degToRad(45)]}
        scale={[2, 1, 1]}
      >
        <boxGeometry />
        <meshStandardMaterial
          color="#e67e22"
          opacity={0.5}
          transparent={true}
        />
        <axesHelper />

        <mesh scale={[0.1, 0.1, 0.1]} position={[0, 2, 0]}>
          <sphereGeometry />
          <meshStandardMaterial color="#f00" />
          <axesHelper scale={5} />
        </mesh>
      </mesh>
    </>
  );
}

export default MYElement3D;