[ReactThreeFiber] Geometry의 종류와 인자

Geometry의 args 속성

arguments의 줄임말, 각 지오메트리를 위한 클래스의 생성자에 대한 인자값

boxGeometry

---

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

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 },
})

//..

<OrbitControls />
<ambientLight intensity={0.1} />
<directionalLight position={[2, 1, 1]} intensity={0.5} />

<mesh ref={refMesh}>
  <boxGeometry args={[ xSize, ySize, zSize, xSegments, ySegments, zSegments ]} />
  <meshStandardMaterial color="fcfcfc" />
</mesh>

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

<axesHelper scale={10}>

boxGeometry는 args속성에 6개의 인자를 가지고 있고 배열의 각 요소가 [ xSize, ySize, zSize, xSegments, ySegments, zSegments ] 를 의미한다.

---

sphereGeometry(구)

---

//..

const { radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength } = useControls({
  radius: { value: 1, min: 0.1, max: 5, step: 0.01 },
  widthSegments: { value: 32, min: 3, max: 256, step: 1 }, // max는 자유, step운 항상 1이상
  heightSegments: { value: 32, min: 2, max: 256, step: 1 },
  phiStart: { value: 0, min: 0, max: 360, step: 0.1 }, // 수평 방향에 대한 시작 각도
  phiLength: { value: 360, min: 0, max: 360, step: 0.1 },  // 수평 방향에 대한 연장 각도
  thetaStart: { value: 0, min: 0, max: 180, step: 0.1 },
  thetaLength: { value: 180, min: 0, max: 180, step: 0.1 },
})

// phiLength - 180도 줄인다고 하면 세로로 반구가 되어버린다.
// phiStart - 위 상태에서 180도 늘인다고 하면 다시 360도가 되어버린다.
// 하지만 시작점과 끝점은 180도 달라진 상태
// thetaStart - 늘이면 구의 꼭대기부터 없어짐
// thetaLength - 줄이면 구의 맨 아래부터 없어짐

useEffect(()=>{
   refWireMesh.current.geometry = refMesh.current.geometry
},[ radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ])

//..

<mesh ref={refMesh}>
  <sphereGeometry
    args={[radius, widthSegments, heightSegments, phiStart*MathPI/180, phiLength*MathPI/180, thetaStart*MathPI/180, thetaLength*MathPI/180]}
  />
  <meshStandardMaterial color="fcfcfc" />
</mesh>

sphereGeometry args속성에 7개의 인자를 가지고 있고 배열의 각 요소가 [ radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ] 를 의미한다.

---

---

cylinderGeometry(각기둥)

---

//..

const { topRadius, bottomRadius, height, radialSegments, heightSegments, bOpen, thetaStart, thetaLength } = useControls({
  topRadius: { value: 1, min: 0.1, max: 5, step: 0.01 },
  bottomRadius: { value: 1, min: 0.1, max: 5, step: 0.01 },
  height: { value: 1, min: 0.1, max: 5, step: 0.01 },
  radialSegments: { value: 32, min: 1, max: 256, step: 1 }, // 각기둥의 각, 옆면에 대한 분할 수
  heightSegments: { value: 1, min: 1, max: 256, step: 1 },  // 높이 방향으로의 분할 수
  bOpen: { value: false }, // 뚜껑 유무
  thetaStart: { value: 0, min: 0, max: 360, step: 0.1 }, // 시작각도, 각기둥의 시작 각도 위치 연장각도를 줄인 상태에서 움직이면 축을 기준으로 돈다
  thetaLength: { value: 360, min: 0, max: 360, step: 0.1 }, // 연장각도, 각기둥의 전체각도 줄이면 조각케이크 마냥 잘림
})

useEffect(()=>{
   refWireMesh.current.geometry = refMesh.current.geometry
},[ topRadius, bottomRadius, height, radialSegments, heightSegments, bOpen, thetaStart, thetaLength ])

//..

<mesh ref={refMesh}>
  <sphereGeometry
    args={[topRadius, bottomRadius, height, radialSegments, heightSegments, bOpen, thetaStart*MathPI/180, thetaLength*MathPI/180]}
  />
  <meshStandardMaterial color="fcfcfc" />
</mesh>

---

three.js에 다양한 geometry가 있으니 참고하자