スタートページ＞ Javascript＞ CANVAS＞ WebGL

WebGL Three.js 　geometry（被写体の形状）

オブジェクト（被写体）の形状のことを geometry といいます。
実際のアニメーションでは、複雑なオブジェクトを作成することが重要になりますが、それには高度なデザインセンスと膨大な作業が必要になります。それに特化した多くの支援ソフトがあります。

Three.js にも標準的な geometry が組み込まれています。
　　https://threejs.org/docs/#api/en/geometries/BoxGeometry
の左フレーム「Geometries」に一覧表があり、使い方と表示例があります。
ここでは、そのうちの代表的なものを紹介します。

下の form の値をいろいろ変えてパラメタの意味を確認してください。
ところが、私の設定が不十分なめに、一部のパラメタ（特にSegments系）の変化が明確に表示されないことがあります。

直方体 box

　THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
　　width：幅（Ｘ軸）、　height：高さ（Ｙ軸）、　depth：奥行（Ｚ軸）　必須
　　Segments：辺に沿ってセグメント化する長方形の面の数　省略値 = 1

球体　sphere

　THREE.SphereGeometry
　　　(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength);
　　radius；半径　　必須
　　widthSegments, phiStart, phiLength：水平方向セグメント数、開始角度、掃引角度サイズ
　　heightSegments, thetaStart, thetaLength：垂直方向

ドーナッツ　torus

　THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc);
　　radius：ドーナッツ全体の半径　必須
　　tube：ドーナッツの管体の半径　必須
　　Segments：セグメント数　省略値 = 8, 6 小さいと多角形、大きくすると円形になる
　　arc：中心角　省略値 = 2*Math.PI　設定すると奇妙な形状になる

平面　plane

　THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
　　width：幅（Ｘ軸）、　height：高さ（Ｙ軸）　必須
　　Segments：辺に沿ってセグメント化する長方形の面の数　省略値 = 1

この形状では、material を次のように指定する必要があります。
　material = new THREE.MeshBasicMaterial( {color: 0xFF0000, side: THREE.DoubleSide} );

四面体 tetrahedron

　THREE.TetrahedronGeometry(radius, detail);
　　radius：半径　必須
　　detail：省略値 = 0,  1とすると立方体, 3とすると六面体になるが、きれいな形状にはなりません。
　ここでは掲げていませんが、「Tetrahedron」を「Octahedron」とすると八面体になります。 

円柱　cylinder

　THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength);
　　radiusTop, radiusBottom, height：頂部半径、底部半径、高さ　　必須
　　radialSegments：省略値 = 8（八角柱になる）大きくすると円柱になる　必須
　　heightSegments：高さ方向のセグメント個数。省略値 = 1 
　　openEnded：円柱の端　省略値 = false（蓋がある）
　　thetaStart：最初のセグメントの開始角度。省略値 = 0（3時の位置）
　　thetaLength：扇形の中心角。省略値 = 2*Math.PI（円）
　円錐のGeometryもありますが、radiusTop = 0 としても得られます。