Geomety Demo Page

描画するオブジェクトの形を指定できるGeometryのデモページです
ここで紹介している以外にも沢山の形状が指定できるので
そちらはThree.jsの公式ドキュメントで見てみて下さい

Box Geometry


  const BoxGeometry = () => {
    return (
      <Canvas>
        <CameraController />
        <mesh scale={1}>
          <boxGeometry
            args={[
              3,    // width
              3,    // height
              3,    // depth
              1,    // widthSegments
              1,    // heightSegments
              1     // depthSegments
            ]}
          />
          <meshNormalMaterial />
        </mesh>
      </Canvas>
    )
  }

その名の通り立方体を指定するジオメトリです
オプションで指定できるSegmentsは面の粒度の様なもので
BoxGeometryは面で構成されているので、基本的に1でOKです

Sphere Geometry


  const SphereGeometry = () => {
    return (
      <Canvas>
        <CameraController />
        <mesh scale={1}>
          <sphereGeometry
            args={[
              3,                      // radius
              32,                     // widthSegments
              16,                     // heightSegments
              0,                      // phiStart
              6.283185307179586,      // phiLength
              0,                      // thetaStart
              3.141592653589793,      // thetaLength
            ]}
          />
          <meshNormalMaterial />
        </mesh>
      </Canvas>
    )
  }

球体を指定するジオメトリです
基本的には上3つのプロパティ以外は指定しないかもしれませんが
Startの位置やLengthを変える事で、半球を指定したりもできます
面の粒度を表すwidthSegmentsの最大値は64、heightSegmentsの最大値は32になっています

Plane Geometry


  const PlaneGeometry = () => {
    return (
      <Canvas>
        <CameraController />
        <mesh scale={1}>
          <planeGeometry
            args={[
              3,    // width
              3,    // height
              1,    // widthSegments
              1,    // heightSegments
            ]}
          />
          <meshNormalMaterial />
        </mesh>
      </Canvas>
    )
  }

平面を指定するジオメトリです
指定できるプロパティはBoxGeometryとほぼ一緒でSegmentsは1にしておきましょう
ゲーム等では良く地面の役割で使われることが多いようです

Torus Geometry


  const TorusGeometry = () => {
    return (
      <Canvas>
        <CameraController />
        <mesh scale={1}>
          <torusGeometry
            args={[
              3,                    // radius
              1,                    // tube
              16,                   // radialSegments
              100,                  // tubularSegments
              6.283185307179586,    // arc
            ]}
          />
          <meshNormalMaterial />
        </mesh>
      </Canvas>
    )
  }

ドーナツ型を指定できるジオメトリです