Hellow Three.js 之 创建各种几何形状

Demo查看

geometry

几何模型(Geometries)

几何形状（Geometry）最主要的功能是储存了一个物体的顶点信息。WebGL需要程序员指定每个顶点的位置，而在Three.js中，可以通过指定一些特征来创建几何形状，例如使用半径创建一个球体，从而省去程序员一个个指定顶点的工作量。

基本几何形状包括：立方体、平面、球体、圆柱体、四面体、八面体等几何形状，以及以三维文字作为几何形状的方法。

1、BoxGeometry 盒状几何体

盒型几何是四边形的原始几何类。它通常用于创建一个立方体或带有"宽度"、"高度"和"深度"构造函数参数的不规则四边形。

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

• width -- X轴上的面的宽度

• height -- Y轴上的面的高度

• depth -- Z轴上的面的深度

• widthSegments -- 可选参数. 沿宽度面的分割面数量. 默认值为1.

• heightSegments -- 可选参数. 沿高度面的分割面数量. 默认值为1.

• depthSegments -- 可选参数. 沿深度面的分割面数量. 默认值为1.

2、CircleGeometry 圆形几何体

CircleGeometry(radius, segments, thetaStart, thetaLength)

• radius -- 圆的半径, 默认值 = 50.

• segments -- 分割面数量 (三角形), 最低值 = 3, 默认值 = 8.

• thetaStart -- 第一个分割面的开始角度, 默认值 = 0 (3点钟方向).

• thetaLength -- 圆形扇形的圆心角通常称为θ。默认为2 * Pi，这形成了一个完整的圆

3、ConeGeometry 圆锥形几何体

ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)

• radius -- 锥底半径. 默认值为20.

• height -- 锥体高度. 默认值为100.

• radiusSegments -- 围绕圆锥周长的分割面数量. 默认值为8.

• heightSegments -- 沿圆锥高度的分割面数量. 默认值为1.

• openEnded -- 指示锥底是打开还是覆盖的布尔值. 默认值为false, 意思是覆盖.

• thetaStart -- 第一个分割面的开始角度, 默认值 = 0 (3点钟方向).

• thetaLength -- 圆形扇形的圆心角通常称为θ。默认为2 * Pi，这形成了一个完整的锥体.

4、CylinderGeometry 圆筒几何体

CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength)

• radiusTop -- 圆柱体顶端半径. 默认值为20.

• radiusBottom -- 圆柱体底端半径. 默认值为20.

• height -- 圆柱体高度. 默认值为100.

• radiusSegments -- 围绕圆柱体周长的分割面数量. 默认值为8.

• heightSegments -- 沿圆柱体高度的分割面数量. 默认值为1.

• openEnded -- 指示圆柱体两端是打开还是覆盖的布尔值. 默认值为false, 意思是覆盖.

• thetaStart -- 第一个分割面的开始角度, 默认值 = 0 (3点钟方向).

• thetaLength -- 圆形扇形的圆心角通常称为θ。默认为2 * Pi，这形成了一个完整的圆柱体.

5、PlaneGeometry 平面几何体

PlaneGeometry(width, height, widthSegments, heightSegments)

• width -- 沿X轴宽度.

• height -- 沿Y轴高度

• widthSegments -- 可选参数，x方向的分段数，缺省为1。

• heightSegments -- 可选参数，y方向的分段数，缺省为1。

6、SphereGeometry 球形几何体

SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

• radius -- 球体半径. 默认值为50.

• widthSegments -- 水平分割面的数量. 最小值为3, 默认值为8.

• heightSegments -- 垂直分割面的数量. 最小值为2, 默认值为6.

• phiStart -- 指定水平起始角度. 默认值为0.

• phiLength -- 指定水平扫描角度大小. 默认值为 Math.PI * 2.

• thetaStart -- 指定垂直起始角度. 默认值为0.

• thetaLength -- 指定垂直扫描角度大小. 默认值为Math.PI.

7、TorusGeometry 空心环几何体

TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)

• radius -- 半径, 默认值为100.

• tube -- 管道直径. 默认值为40.

• radialSegments -- 默认值为8

• tubularSegments -- 默认值为6.

• arc -- 圆心角. 默认值为Math.PI * 2.

8、TorusKnotGeometry 环面扭结几何体

TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q)

• radius -- 半径, 默认值为100.

• tube -- 管道直径. 默认值为40.

• tubularSegments -- 默认值为64.

• radialSegments -- 默认值为8.

• p -- 这个值决定了几何体绕旋转对称轴绕了多少圈. 默认值为2.

• q -- 这个值决定了几何体绕环面的圆绕了多少圈. 默认值为3.

9、TextGeometry 3D文字几何体

TextGeometry(text, parameters)

text -- 要显示的文字

parameters -- 包含下面这些参数的对象

• font -- THREE. 字体.

• size -- Float. 大小.

• height -- Float. 文字厚度. 默认值为50.

• curveSegments -- Integer. 曲线上点的数量. 默认值为12.

• bevelEnabled -- Boolean. 是否打开斜面. 默认值为False.

• bevelThickness -- Float. 文本斜面的深度. 默认值为10.

• bevelSize -- Float. 斜面离轮廓的距离. 默认值为8.

threejs 只提供了一部分3D字体模型. 汉字没戏了，

目前支持的字体有 helvetiker , optimer , gentilis , droid sans , droid serif 每种都包含normal正常体和 bold 粗体.

---

本文部分内容参照及引用：

Three.js入门指南