[ReactThreeFiber] Geometry

Geometry

mesh의 모양을 정의한다.

모든 지오메트리는 BufferGeometry 클래스를 상속받는다.

---

내부 Attribute 데이터

---

1. Position - 형상의 정의하는 3차원 정점
2. Normal - 모델의 면에 대한 수직 백터
3. Color - 정점의 색상
4. UV - 텍스쳐 맵핑을 위한 좌표
5. Vertex Index - 삼각형 면 구성을 위한 정점 인덱스

-> 렌더링 시 GPU에 전달된다.

기본 Geometry가 three.js에 정의되어 있다.

mesh에 대한 지오메트리를 지정하는 방법은 지금까지 내가 사용한 방법인

<mesh>
  <boxGeometry args={[1, 1, 1]} />
  <meshStandardMaterial color="fcfcfc" />
</mesh>

이 방법과

import { Box } from "@react-three/drei";

//..

<Box position={[1.2, 0, 0]}>
  <meshStandardMaterial color="fcfcfc" />
</Box>;

박스가 mesh와 boxGeometry를 대신한다.

또 하나의 방법은 THREE.BoxGeometry() 를 이용하는 것

function MyBox(props) {
  const geom = new THREE.BoxGeometry();
  return <mesh {...props} geometry={geom}></mesh>;
}

이렇게 만들어진 컴포넌트를 자식 컴포넌트로 만든다.

---

삼각형 변에 대한 외곽선 표현과 겹치는 요소 하나로 합치기

---

<mesh>
  <boxGeometry />
  <meshStandardMaterial color="fcfcfc" />
</mesh>

<mesh>
  <boxGeometry />
  <meshStandardMaterial emissive="yellow" wwireframe={true} />
</mesh>

두 개의 mesh를 하나로 만들어 메모리 낭비를 막으려면

  const refMesh = useRef()
  const refWireMesh = useRef()

  useEffect(()=>{
    refWireMesh.current.geometry = refMesh.current.geometry
  },[])

  //..

<mesh ref={refMesh}>
  <boxGeometry />
  <meshStandardMaterial color="fcfcfc" />
</mesh>

<mesh ref={refWireMesh}>
  <meshStandardMaterial emissive="yellow" wwireframe={true} />
</mesh>

---

geometry args 속성

---

<mesh ref={refMesh}>
  <boxGeometry args={[1, 1, 1, 1, 1, 1]} /> // default 값이다.
  <meshStandardMaterial color="fcfcfc" />
</mesh>

일단 args에서 직접 바꾸는게 아닌 UI 라이브러리를 사용해서 효과적으로 boxGeometry를 바꾸어보자.

---

leva

---

npm i leva - 설치

웹에서 마우스를 이용해서 직접적으로 geometry를 조작할 수 있게한다.

import { usecontrols } from "leva";

//..

  useEffect(()=>{
    refWireMesh.current.geometry = refMesh.current.geometry
  },[ xSize, ySize, zSize, xSegments, ySegments, zSegments ])

//..

const { xSize, ySize, zSize, xSegments, ySegments, zSegments } = useControls({
  xSize: { value: 1, min: 0.1, max: 5, step: 0.01 },
  ySize: { value: 1, min: 0.1, max: 5, step: 0.01 },
  zSize: { value: 1, min: 0.1, max: 5, step: 0.01 },
  xSegments: { value: 1, min: 1, max: 10, step: 1 }, // step은 항상 1이상
  ySegments: { value: 1, min: 1, max: 10, step: 1 },
  zSegments: { value: 1, min: 1, max: 10, step: 1 },
})

<boxGeometry args={[ xSize, ySize, zSize, xSegments, ySegments, zSegments ]} />

useEffect의 의존성 배열인자에 args의 요소를 넣음으로 외곽선 또한 크기 조절이 되도록한다.