Geomety Demo Page

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つのプロパティ以外指定しない。
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でおk

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

なんかデフォルト値で小数点つく様な値は基本触らなくてよいよ