[R3F] Geometries 종류

기본 Geometries

1. <boxGeometry>
   • 직육면체 모양을 만듭니다.
   • 속성: width, height, depth, widthSegments, heightSegments, depthSegments.
2. <planeGeometry>
   • 2D 평면을 만듭니다.
   • 속성: width, height, widthSegments, heightSegments.
3. <circleGeometry>
   • 원 모양을 만듭니다.
   • 속성: radius, segments, thetaStart, thetaLength.
4. <sphereGeometry>
   • 구 모양을 만듭니다.
   • 속성: radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength.
5. <coneGeometry>
   • 원뿔 모양을 만듭니다.
   • 속성: radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength.
6. <cylinderGeometry>
   • 원기둥 모양을 만듭니다.
   • 속성: radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength.
7. <torusGeometry>
   • 도넛 모양을 만듭니다.
   • 속성: radius, tube, radialSegments, tubularSegments, arc.
8. <torusKnotGeometry>
   • 매듭 모양을 만듭니다.
   • 속성: radius, tube, radialSegments, tubularSegments, p, q.
9. <ringGeometry>
   • 고리 모양을 만듭니다.
   • 속성: innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength.
10. <dodecahedronGeometry>
    • 12면체 모양을 만듭니다.
    • 속성: radius, detail.
11. <icosahedronGeometry>
    • 20면체 모양을 만듭니다.
    • 속성: radius, detail.
12. <octahedronGeometry>
    • 8면체 모양을 만듭니다.
    • 속성: radius, detail.
13. <tetrahedronGeometry>
    • 4면체 모양을 만듭니다.
    • 속성: radius, detail.

---

고급 Geometries

1. <extrudeGeometry>
   • 2D 형태를 3D로 압출하여 기하학적 구조를 만듭니다.
   • 속성: shapes, options (예: 깊이, 베벨 등).
2. <latheGeometry>
   • 회전 대칭 모양을 만듭니다.
   • 속성: points, segments, phiStart, phiLength.
3. <textGeometry>
   • 3D 텍스트를 만듭니다.
   • 속성: text, font, size, height, curveSegments.
4. <shapeGeometry>
   • 2D 모양(Shape)을 기하학으로 변환합니다.
   • 속성: shapes.

 

예시 코드:

import { Canvas } from '@react-three/fiber';

function App() {
  return (
    <Canvas>
      <mesh position={[0, 0, 0]}>
        <boxGeometry args={[3, 2, 1, 4, 3, 2]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    </Canvas>
  );
}

export default App;

설명:

• args 속성을 사용하여 박스의 크기와 세그먼트를 설정합니다.
  • args 배열: [width, height, depth, widthSegments, heightSegments, depthSegments]
  • width: 3 단위, 가로 길이
  • height: 2 단위, 세로 길이
  • depth: 1 단위, 깊이 길이
  • widthSegments: 가로 방향의 세그먼트 수 (4개)
  • heightSegments: 세로 방향의 세그먼트 수 (3개)
  • depthSegments: 깊이 방향의 세그먼트 수 (2개)