【Three】ジオメトリ

ジオメトリを指定することで、立方体や球など様々なオブジェクトを表示できる。

球体、直方体、三角錐、ドーナツ状など基本的な形状がthree.jsで用意されている。

球体

threejs.org

SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)

new THREE.SphereGeometry(半径, 経度分割数, 緯度分割数, 開始経度, 経線中心角, 開始緯度, 緯線中心角)

const geometry = new THREE.SphereGeometry(250, 32, 32)

立方体

threejs.org

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

new THREE.BoxGeometry(幅, 高さ, 奥行き)

const geometry = new THREE.BoxGeometry(250, 250, 250)

平面

threejs.org

PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)

THREE.PlaneGeometry ( 幅, 高さ , 経度分割数, 緯度分割数)

const geometry = new THREE.PlaneGeometry(250, 250, 1, 1)

円柱

threejs.org

CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

new THREE.CylinderGeometry(上面の半径, 底面の半径, 高さ,円周の分割数, 高さの分割数, フタ（true/false）)

参考書

初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ