这是我参与8月更文挑战的第27天,活动详情查看:8月更文挑战
一个模型是由几何体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个方向将几何体切成一块一块。
圆形
圆形是由多个三角形分段构成,这些三角形分段围绕一个中心点延伸并且延伸到给定半径以外。
创建
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,画出一个整圆
圆锥
创建
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,画出一个整圆
圆柱
创建
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,画出一个整圆
球
创建
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