Three.js学习11：几何体（2）-常见三维几何体

 -----------------------------华丽的分割线---------------------

相关代码均已上传到 gitee 中：myThree: 学习 Three.js ，努力加油~！

Gitee 静态演示地址：Three JS 演示页面

-----------------------------华丽的分割线---------------------

本文继续学习了解几何体，三维几何体。

一、常见三维几何体

（1）BoxGeometry：立方体

BoxGeometry 是四边形的原始几何类，它通常使用构造函数所提供的 “width”、“height”、“depth” 参数来创建立方体或者不规则四边形。

构造函数：

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

属性	是否必填	描述
width	否	X 轴上面的宽度，默认值为 1。
height	否	Y 轴上面的宽度，默认值为 1。
depth	否	Z 轴上面的宽度，默认值为 1。
widthSegments	可选	（可选）宽度的分段数，默认值是 1。
heightSegments	可选	（可选）高度的分段数，默认值是 1。
depthSegments	可选	（可选）深度的分段数，默认值是 1。

示例代码：

const geometry = new THREE.BoxGeometry( 1, 1, 1 ); 
const material = new THREE.MeshBasicMaterial( {color: 0xff3300} ); 
const cube = new THREE.Mesh( geometry, material ); 
scene.add( cube );

（2）SphereGeometry：球体

用于生成球类。

构造函数：

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

属性	是否必填	描述
radius	否	球体半径，默认值为 1。
widthSegments	否	水平分段数（沿着经线分段），最小值为3，默认值为 32。
heightSegments	否	垂直分段数（沿着纬线分段），最小值为2，默认值为16。
phiStart	否	指定水平（经线）起始角度，默认值为 0。
phiLength	否	指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。
thetaStart	否	指定垂直（纬线）起始角度，默认值为 0。
thetaLength	否	指定垂直（纬线）扫描角度大小，默认值为 Math.PI。

示例代码：  

const geometry = new THREE.SphereGeometry( 15, 32, 16 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

（3）CylinderGeometry：圆柱体

用于生成圆柱几何体。

构造函数：

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

属性	是否必填	描述
radiusTop	否	圆柱的顶部半径，默认值是 1。
radiusBottom	否	圆柱的底部半径，默认值是 1。
height	否	圆柱的高度，默认值是 1。
radialSegments	否	圆柱侧面周围的分段数，默认为 32。
heightSegments	否	圆柱侧面沿着其高度的分段数，默认值为 1。
openEnded	否	一个Boolean值，指明该圆锥的底面是开放的还是封顶的。 默认值为 false，即其底面默认是封顶的。
thetaStart	否	第一个分段的起始角度，默认为 0。三点钟方向。
thetaLength	否	圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是 2*Pi，这使其成为一个完整的圆柱。

示例代码：

const geometry =  new THREE.CylinderGeometry(  2, 2, 5, 32 );
const material = new THREE.MeshBasicMaterial({
    color:"#ff3300"
});
const cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

（4）TorusGeometry：立体圆环

用于生立体圆环。

构造函数：

TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)

属性	是否必填	描述
radius	否	环面的半径，从环面的中心到管道横截面的中心。默认值是 1。
tube	否	管道的半径，默认值是 0.4。
radialSegments	否	管道横截面的分段数，默认值是 12。
tubularSegments	否	管道的分段数，默认为 48。
arc	否	圆环的圆心角（单位是弧度），默认值为 2*Math.PI。

示例代码：

const geometry =  new THREE.TorusGeometry();
const material = new THREE.MeshBasicMaterial( { 
    color:"#ff3300" 
} );
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

（5）CapsuleGeometry：胶囊体

用于生成胶囊。

构造函数：

CapsuleGeometry(radius : Float, length : Float, capSegments : Integer, radialSegments : Integer)

属性	是否必填	描述
radius	否	胶囊半径。默认值是 1。
length	否	中间区域的长度，默认值是 1。
capSegments	否	构造盖子的曲线部分的个数，默认值是 4。
radialSegments	否	覆盖胶囊圆周的分离的面的个数，默认为 8。

示例代码：

const geometry = new THREE.CapsuleGeometry( 1, 1, 4, 8 ); 
const material = new THREE.MeshBasicMaterial( {
    color: 0xff3300
} ); 
const capsule = new THREE.Mesh( geometry, material ); 
scene.add( capsule );

（6）ConeGeometry：圆锥体

用于生成圆锥体。

构造函数：

ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

属性	是否必填	描述
radius	否	圆锥底部的半径。默认值是 1。
height	否	圆锥的高度，默认值是 1。
radialSegments	否	圆锥侧面周围的分段数，默认值是 32。
heightSegments	否	圆锥侧面沿着其高度的分段数，默认为 1。
openEnded	否	一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为 false，即其底面默认是封顶的。
thetaStart	否	第一个分段的起始角度，默认为 0。三点钟位置。
thetaLength	否	圆锥底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是 2*Pi，这使其成为一个完整的圆锥。

示例代码：

const geometry = new THREE.ConeGeometry( 5, 20, 32 );
const material = new THREE.MeshBasicMaterial( {color: 0xff3300} );
const cone = new THREE.Mesh( geometry, material );
scene.add( cone );

二、其它三维几何体

其它几何体在官方文档中，均有详细描述，本文就不在赘述。

建议读者按照官方文档说明，自己在代码中敲一次，加强印象。