BufferGeometry 缓冲区几何模型

Geometry 更高效的处理顶点位置、顶点颜色和法线等多个属性, 减少数据传递到GPU的时间. 主要使用addAttribute来实现.

function BufferGeometry( ) { } var geometry = new THREE.BufferGeometry(), vertices = new Float32Array([ -4, 0, 0, -4, 2, 0, -2, 2, 0, -2, 4, 0, 2, 4, 0, 2, 2, 0, 4, 2, 0, 4, 0, 0 ]), colors = new Float32Array(vertices.length); for(var i = 0; i < colors.length; i+=3){ colors[i] = new THREE.Color(0xffffff * Math.random()).r; colors[i+1] = new THREE.Color(0xffffff * Math.random()).g; colors[i+2] = new THREE.Color(0xffffff * Math.random()).b; } geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3)); var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors }), line = new THREE.LineLoop(geometry, material); scene.add(line); var geometry2 = new THREE.BufferGeometry(), vertices2 = new Float32Array([ -4, 0, 0, -2, 2, 0, -4, 2, 0, -4, 0, 0, 4, 0, 0, -2, 2, 0, -2, 2, 0, 4, 0, 0, 4, 2, 0, -2, 2, 0, 2, 4, 0, -2, 4, 0, -2, 2, 0, 2, 2, 0, 2, 4, 0 ]), normals = new Float32Array(vertices2.length), colors2 = new Float32Array(vertices2.length); for(var i = 0; i < normals.length; i+=3){ normals[i] = 0; normals[i+1] = 0; normals[i+2] = 1; colors2[i] = new THREE.Color(0xffffff * Math.random()).r; colors2[i+1] = new THREE.Color(0xffffff * Math.random()).g; colors2[i+2] = new THREE.Color(0xffffff * Math.random()).b; } geometry2.addAttribute('position', new THREE.BufferAttribute(vertices2, 3)); geometry2.addAttribute('normal', new THREE.BufferAttribute(normals, 3)); geometry2.addAttribute('color', new THREE.BufferAttribute(colors2, 3)); var materiavector2 = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors, side: THREE.DoubleSide }), mesh = new THREE.Mesh(geometry2, materiavector2); scene.add(mesh);

Attributes

name : String

Default value : ""
Description : 名称

type : String

Default value : 'BufferGeometry'
Description : 类型

index : BufferAttribute

Default value : null
Description : 三角形索引

attributes : Object

Default value : { position: {…}, normal: {…}, uv: {…} }
Description : 设置传给 GL 的属性. 使用 addattribute() 和 getAttribute() 方法来访问. 要想获得类似 Geometry 的 vertices 的数据, 可依据 attributes.position.array 得到. 要修改 y 坐标时, 从 1 开始, 步进为3. const vertices = geometry.attributes.position.array; for(let i = 1; i < vertices.length; i+=3){ vertices[i] = Math.random() * 10; }

morphAttributes : Object

Default value : {}
Description : BufferAttribute 的哈希表拥有 Geometry 的 BufferAttribute.

groups : Array

Default value : []
Description : 组

boundingBox : Box3

Default value : null
Description : 包围盒, 初始值为 null, 需要根据 computeBoundingBox( ) 求得.

boundingSphere : Sphere

Default value : null
Description : 包围球, 初始值为 null, 需要根据 computeBoundingSphere( ) 求得.

drawRange : Object

Default value : { start: 0, count: Infinity }
Description : 拉伸范围: 决定几何模型中要被渲染的部分.

userData : Object

Default value : {}
Description : 用户数据.

isBufferGeometry : Boolean

Default value : true
Description : 类型是否为BufferGeometry

Methods

getIndex( ) : this.index

.

setIndex( index ) : null
Parameter Type Description
index Int 索引

设置索引.

addAttribute( name, attribute ) : this
Parameter Type Description
name String 属性名
attribute Object 属性

添加属性.

getAttribute( name ) : Object
Parameter Type Description
name String 属性名

获取属性.

removeAttribute( name ) : this
Parameter Type Description
name String 属性名

删除属性.

addGroup( start, count, materialIndex ) : null
Parameter Type Description
start Int Draw call 绘制调用中的第一个元素:未索引的几何模型的第一个顶点, 或第一个三角形的索引.
count Int 顶点数.
materialIndex Int 材质数组索引

添加组.

clearGroups( ) : this

清除组.

setDrawRange( start, count ) : this
Parameter Type Description
start Int 第一个元素或顶点的索引.
count Int 顶点数.

设置拉伸范围.

applyMatrix( matrix ) : this
Parameter Type Description
matrix Matrix4 矩阵

对顶点坐标施加矩阵变换.

rotateX( angle ),   rotateY( angle ),   rotateZ( angle ) : this
Parameter Type Description
angle Float 角度

物体绕 x轴 / y轴 / z轴 旋转一个角度

translate( x, y, z ) : this
Parameter Type Description
x, y, z Float x方向, y方向, z方向上的距离

平移.

scale( x, y, z ) : this
Parameter Type Description
x, y, z Float x方向, y方向, z方向上的缩放值

缩放.

lookAt( vector ) :
Parameter Type Description
vector Vector3 用来被注视着的观察点

旋转几何模型来对着观察点.

center( ) : this

把几何模型居中在包围盒内.

setFromObject( object ) : this
Parameter Type Description
object Object3D 3D对象

以 Object3D 对象来设置属性.

setFromPoints( points ) : this
Parameter Type Description
points Array 点数组

运用点数组来设置顶点.

updateFromObject( object ) : this
Parameter Type Description
object Object3D 3D对象

以 Object3D 对象来更新属性.

fromGeometry( geometry ) :
Parameter Type Description
geometry Geometry 几何模型

从一个 Geometry 对象来生成 BufferGeometry.

fromDirectGeometry( geometry ) :
Parameter Type Description
geometry DirectGeometry Direct几何模型

从一个 DirectGeometry 对象来生成 BufferGeometry.

computeBoundingBox( )

计算包围盒.

computeBoundingSphere( )

计算包围球.

computeVertexNormals( )

计算顶点法线.

merge( geometry, offset ) : this
Parameter Type Description
geometry BufferGeometry 缓冲区几何模型
offset Int 偏移量

合并几何模型.

normalizeNormals( )

归一化法向量.

toNonIndexed( ): BufferGeometry

返回一个无索引的 BufferGeometry .

toJSON( ) : Object

返回 Json 格式的数据.

clone( ) : BufferGeometry

创建自身的一个克隆, 从 copy( this ) 得到.

copy( geometry ) : this
Parameter Type Description
geometry BufferGeometry 缓冲区几何模型

复制模型.

图解API

BufferGeometry 主要依据 addAttribute( name, attribute ) 来对几何体的顶点位置、法向和顶点颜色进行设置. 对应的名词分别是 'position', 'normal' 和 'color'. 如果你使用的材质为 MeshBasicMaterial 时, 因为不受光照, 可以省略 geometry.addAttribute('normal', new THREE.Float32BufferAttribute( normals, 3 )). 下面代码演示了先写出具体的顶点, 哪三个点确定一个面来对vertices设值, 再按照右手法则:三角形逆时针确定法向方向. 点开查看

var v1 = new THREE.Vector3(-6, -4, -1), v2 = new THREE.Vector3(6, -1, 2), v3 = new THREE.Vector3(1, 0, -3), v4 = new THREE.Vector3(-1, 4, 0), points = [v1,v2,v3, v4,v2,v3], vector1 = new THREE.Vector3(), vector2 = new THREE.Vector3(), n = new THREE.Vector3(), face_color = new THREE.Color( 0xFFFFEE); var vertices = [], normals = [], face_colors = []; for(var i = 0; i < points.length; i++){ vertices.push(points[i].x, points[i].y, points[i].z); var p = Math.floor(i/3); vector1.subVectors(points[p], points[p+1]); vector2.subVectors(points[p+1], points[p+2]); n = vector1.cross(vector2).normalize(); normals.push(n.x, n.y, n.z); face_colors.push(face_color.r, face_color.g, face_color.b); } var geometry = new THREE.BufferGeometry(); geometry.addAttribute('position', new THREE.Float32BufferAttribute( vertices, 3 )); geometry.addAttribute('normal', new THREE.Float32BufferAttribute( normals, 3 )); geometry.addAttribute('color', new THREE.Float32BufferAttribute( face_colors, 3 )); var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors, side: THREE.DoubleSide }), mesh = new THREE.Mesh(geometry, material); scene.add(mesh);