图形化开发（五）011-Three.js之Geometry几何体——立方体、圆形、圆锥

图形化开发（五）011-Three.js之Geometry几何体——立方体、圆形、圆锥

Geometry几何体

一个模型是由几何体Geometry和材质material组成。Three.js内置了很多的几何体种类，如：立方体、三棱锥、球、八面体、十二面体、二十面体等等，这一节我们将介绍一下这些类型几何体的模型创建和几何体的通用方法。

Geometry和BufferGeometry

当前Three.js内置了这两种几何体类型Geometry和BufferGeometry，这两个几何体类型都是用于存储模型的顶点位置、面的索引、法向量、颜色、uv纹理以及一些自定义的属性。

它们两个的区别是：

• Geometry
  • 使用了Three.js提供的THREE.Vector3或者THREE.Color这样的对象来存储数据
  • 易与阅读和编辑
  • 性能弱一些
  • 适合动画场景
• 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

立方体

在WebGL里面，所有的模型都是通过三角形面组成。

创建

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

widthSegments，heightSegments，depthSegments这三个参数有点类似切西瓜，分别朝3个方向将几何体切成一块一块。

在线示意：

https://threejs.org/docs/scenes/geometry-browser.html#BoxGeometry

比如我们要将西瓜切成小块，必须朝三个方向切才行。

圆形

圆形是由多个三角形分段构成，这些三角形分段围绕一个中心点延伸并且延伸到给定半径以外。

创建

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

圆锥

创建

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，画出一个整圆

在线示意

— 圆锥体底部是是隐藏还是显示，默认值为false，显示。
thetaStart — 第一段的起始角度，默认值是0（Three.js的0度位置）。
thetaLength — 圆形扇形的中心角，通常称为theta。默认值是2 * Pi，画出一个整圆

在线示意

https://threejs.org/docs/scenes/geometry-browser.html#ConeGeometry