04 Geometry几何体-CFANZ编程社区

前一节讲解了一下场景的结构和基类THREE.Object3D，对Three.js的结构有了一个大概的了解，我们的代码案例还是停留在显示一个立方体的状态。这一节，我们将制作更多的几何体形状。
一个模型是由几何体Geometry和材质material组成。Three.js内置了很多的几何体种类，如：立方体、三棱锥、球、八面体、十二面体、二十面体等等，这一节我们将介绍一下这些类型几何体的模型创建和几何体的通用方法。

Geometry和BufferGeometry

当前Three.js内置了这两种几何体类型，这两个几何体类型都是用于存储模型的顶点位置、面的索引、法向量、颜色、uv纹理以及一些自定义的属性。
它们两个的区别是：BufferGeometry存储的都是一些原始的数据，性能比Geometry的性能高，很适合存储一些放入场景内不需要再额外操作的模型。而Geometry的优势刚好相反，Geometry比BufferGeometry更友好，使用了Three.js提供的THREE.Vector3或者THREE.Color这样的对象来存储数据（顶点位置，面，颜色等），这些对象易于阅读和编辑，但效率低于BufferGeometry使用的类型化数组。
所以，我们可以根据项目的大小来使用不同的几何体，小项目，可以使用Geometry实现，中大型的项目，还是推荐BufferGeometry。
本篇教程作为入门教程，所以我们使用作为简单的Geometry来实现案例。

Geometry和BufferGeometry互转

在这里插一点内容，两种几何体类型可以互转，所以，不要害怕现在使用的是那种。

BufferGeometry转换成Geometry

//实例化一个Geometry对象
var geo = new THREE.Geometry(); 
//调用对象的fromBufferGeometry方法，并将需要转换的bufferGeometry传入
geo.fromBufferGeometry(bufferGeometry);
//geo为转换转换成的Geometry

Geometry转换成BufferGeometry

//实例化一个BufferGeometry对象
var bufferGeo = new THREE.BufferGeometry(); 
//调用对象的fromGeometry方法，并将需要转换的geometry传入
bufferGeo.fromGeometry(geometry);
//bufferGeo为geometry转换成的BufferGeometry

接下来，我们将讲解一下Three.js内置几何体。

立方体BoxGeometry和BoxBufferGeometry

立方体是我们案例里面的最早接触的几何体，可以通过设置长宽高来创建各种各样的立方体

案例：

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

构造函数：

BoxGeometry(width : 浮点类型, height : 浮点类型, depth : 浮点类型, widthSegments : 整数类型, heightSegments : 整数类型, depthSegments : 整数类型)

width — 沿x轴的宽度，默认值为1
height — 沿y轴的高度，默认值为1
depth — 沿z轴的深度，默认值为1
widthSegments — 可选，沿着边的宽度的分割面的数量。默认值为1
heightSegments — 可选，沿着边的高度的分割面的数量。默认值为1
depthSegments — 可选，沿着边的深度的分割面的数量。缺省值是1

案例查看地址：https://threejs.org/docs/scenes/geometry-browser.html#BoxGeometry

圆CircleGeometry和CircleBufferGeometry

在WebGL里面，所有的模型都是通过三角形面组成，圆形是由多个三角形分段构成，这些三角形分段围绕一个中心点延伸并且延伸到给定半径以外。它从起始角度和给定的中心角度逆时针方向构建。它也可以用来创建规则的多边形，其中线段的数量决定了边的数量。

案例：

var geometry = new THREE.CircleGeometry( 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var circle = new THREE.Mesh( geometry, material );
scene.add( circle );

构造函数：

CircleGeometry(radius : 浮点类型, segments : 整数类型, thetaStart : 浮点类型, thetaLength : 浮点类型)

radius — 圆的半径，默认值为1
segments — 段数（三角形），最小值为3，默认值为8
thetaStart — 第一段的起始角度，默认值为0
thetaLength — 圆形扇形的中心角，通常称为theta。默认值是2 * Pi，画出一个整圆

案例查看地址：https://threejs.org/docs/scenes/geometry-browser.html#CircleGeometry

圆锥ConeGeometry和ConeBufferGeometry

一个可以创建圆锥体的类。

案例：

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

构造函数：

ConeGeometry(radius : 浮点类型, height : 浮点类型, radialSegments : 整数类型, heightSegments : 整数类型, openEnded : 布尔类型, thetaStart : 浮点类型, thetaLength : 浮点类型)

radius — 底部圆锥的半径，默认值为1。
height — 圆锥体的高度，默认值为1。
radialSegments — 圆锥周围的分段面数，默认值为8。
heightSegments — 沿圆锥体高度的面的行数，默认值为1。
openEnded — 圆锥体底部是是隐藏还是显示，默认值为false，显示。
thetaStart — 第一段的起始角度，默认值是0（Three.js的0度位置）。
thetaLength — 圆形扇形的中心角，通常称为theta。默认值是2 * Pi，画出一个整圆

案例查看地址：https://threejs.org/docs/scenes/geometry-browser.html#ConeGeometry

圆柱CylinderGeometry和CylinderBufferGeometry

一个可以创建圆柱几何体的类。

案例：

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

构造函数：

CylinderGeometry(radiusTop : 浮点类型, radiusBottom : 浮点类型, height : 浮点类型, radialSegments : 整数类型, heightSegments : 整数类型, openEnded : 布尔类型, thetaStart : 浮点类型, thetaLength : 浮点类型)

radiusTop — 顶部圆柱体的半径。默认值为1.
radiusBottom — 底部圆柱体的半径。默认值为1.
height — 圆柱体的高度。默认值为1.
radialSegments — 圆柱周围的分段面数。默认值为8
heightSegments — 沿圆柱体高度的面的行数。默认值为1.
openEnded — 圆柱体的两端是否显示，默认值是false，显示。
thetaStart — 第一段的起始角度，默认值是0（Three.js的0度位置）。
thetaLength — 圆形扇形的中心角，通常称为theta。默认值是2 * Pi，画出一个整圆

案例查看地址：https://threejs.org/docs/scenes/geometry-browser.html#CylinderGeometry

球SphereGeometry和SphereBufferGeometry

一个可以创建球体几何体的类。

案例：

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

构造函数：

SphereGeometry(radius : 浮点类型, widthSegments : 整数类型, heightSegments : 整数类型, phiStart : 浮点类型, phiLength : 浮点类型, thetaStart : 浮点类型, thetaLength : 浮点类型)

radius — 球体半径。默认值是1
widthSegments — 水平线段的数量。最小值是3，默认值是8
heightSegments — 垂直段的数量。最小值是2，默认值是6
phiStart — 指定水平渲染起始角度。默认值为0
phiLength — 指定水平渲染角度大小。默认值是Math.PI * 2
thetaStart — 指定垂直渲染起始角度。默认值为0
thetaLength — 指定垂直渲染角度大小。默认是Math.PI

默认是渲染整个的圆，如果线段越多，显得球体越圆滑。

案例查看地址：https://threejs.org/docs/scenes/geometry-browser.html#SphereGeometry

平面PlaneGeometry和SphereBufferGeometry

一个可以创建平面几何体的类。

案例：

var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );

构造函数：

PlaneGeometry(width : 浮点类型, height : 浮点类型, widthSegments : 整数类型, heightSegments : 整数类型)

width — 沿X轴的宽度。默认值为1
height — 沿着Y轴的高度。默认值为1
widthSegments — 宽度的分段数，可选。默认值为1
heightSegments — 高度的分段数，可选。默认值为1

案例查看地址：https://threejs.org/docs/scenes/geometry-browser.html#PlaneGeometry

圆环TorusGeometry和TorusBufferGeometry

一个可以创建圆环几何体的类。

案例：

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( geometry, material );
scene.add( torus );

构造函数：

TorusGeometry(radius : 浮点类型, tube : 浮点类型, radialSegments : 整数类型, tubularSegments : 整数类型, arc : 浮点类型)

radius - 圆环的半径，从圆环的中心到管的中心。默认值为1
tube — 管的半径。默认值是0.4
radialSegments — 横向分段数，默认值是8
tubularSegments — 纵向分段数，默认值是6
arc — 绘制的弧度。默认值是Math.PI * 2，绘制整个圆环

案例查看地址：https://threejs.org/docs/scenes/geometry-browser.html#TorusGeometry

以上是Three.js内置的一些基础的几何体，Three.js还内置了一些其他的几何体模型（如字体几何体、拉伸几何体、车床几何体等），由于篇幅原因和难度原因（本教程为入门教程，尽量避免讲解难度偏低和容易理解的内容）在这里不一一讲解，如果迫不及待的想了解这一块的内容可以通过官方文档：https://threejs.org/docs/ 或者本人博客关于Three.js的笔记：javascript:void(0) 来了解更多。