You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
290 lines
11 KiB
290 lines
11 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>[name]</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry
|
||
|
|
可以有效减少向 GPU 传输上述数据所需的开销。
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
读取或编辑 BufferGeometry 中的数据，见 [page:BufferAttribute] 文档。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>代码示例</h2>
|
||
|
|
<code>
|
||
|
|
const geometry = new THREE.BufferGeometry();
|
||
|
|
// 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
|
||
|
|
// 因为在两个三角面片里，这两个顶点都需要被用到。
|
||
|
|
const vertices = new Float32Array( [
|
||
|
|
-1.0, -1.0, 1.0,
|
||
|
|
1.0, -1.0, 1.0,
|
||
|
|
1.0, 1.0, 1.0,
|
||
|
|
|
||
|
|
1.0, 1.0, 1.0,
|
||
|
|
-1.0, 1.0, 1.0,
|
||
|
|
-1.0, -1.0, 1.0
|
||
|
|
] );
|
||
|
|
|
||
|
|
// itemSize = 3 因为每个顶点都是一个三元组。
|
||
|
|
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
|
||
|
|
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
|
||
|
|
const mesh = new THREE.Mesh( geometry, material );
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<h2>例子</h2>
|
||
|
|
<p>
|
||
|
|
[example:webgl_buffergeometry Mesh with non-indexed faces]<br />
|
||
|
|
[example:webgl_buffergeometry_indexed Mesh with indexed faces]<br />
|
||
|
|
[example:webgl_buffergeometry_lines Lines]<br />
|
||
|
|
[example:webgl_buffergeometry_lines_indexed Indexed Lines]<br />
|
||
|
|
[example:webgl_buffergeometry_custom_attributes_particles Particles]<br />
|
||
|
|
[example:webgl_buffergeometry_rawshader Raw Shaders]
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>构造函数</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[name]()</h3>
|
||
|
|
<div>
|
||
|
|
创建一个新的 [name]. 同时将预置属性设置为默认值.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>属性</h2>
|
||
|
|
|
||
|
|
<h3>[property:Object attributes]</h3>
|
||
|
|
<p>
|
||
|
|
通过 hashmap 存储该几何体相关的属性，hashmap 的 id 是当前 attribute 的名称，值是相应的 [page:BufferAttribute buffer]。
|
||
|
|
你可以通过 [page:.setAttribute] 和 [page:.getAttribute] 添加和访问与当前几何体有关的 attribute。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Box3 boundingBox]</h3>
|
||
|
|
<p>
|
||
|
|
当前 bufferGeometry 的外边界矩形。可以通过 [page:.computeBoundingBox]() 计算。默认值是 *null*。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Sphere boundingSphere]</h3>
|
||
|
|
<p>
|
||
|
|
当前 bufferGeometry 的外边界球形。可以通过 [page:.computeBoundingSphere]() 计算。默认值是 *null*。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Object drawRange]</h3>
|
||
|
|
<p>
|
||
|
|
用于判断几何体的哪个部分需要被渲染。该值不应该直接被设置，而需要通过 [page:.setDrawRange] 进行设置。<br />
|
||
|
|
默认值为
|
||
|
|
<code>
|
||
|
|
{ start: 0, count: Infinity }
|
||
|
|
</code>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Array groups]</h3>
|
||
|
|
<p>
|
||
|
|
将当前几何体分割成组进行渲染，每个部分都会在单独的 WebGL 的 draw call 中进行绘制。该方法可以让当前的 bufferGeometry
|
||
|
|
可以使用一个材质队列进行描述。<br /><br />
|
||
|
|
|
||
|
|
分割后的每个部分都是一个如下的表单：
|
||
|
|
<code>{ start: Integer, count: Integer, materialIndex: Integer }</code>
|
||
|
|
start 表明当前 draw call 中的没有索引的几何体的几何体的第一个顶点；或者第一个三角面片的索引。
|
||
|
|
count 指明当前分割包含多少顶点（或 indices）。
|
||
|
|
materialIndex 指出当前用到的材质队列的索引。<br /><br />
|
||
|
|
|
||
|
|
通过 [page:.addGroup] 来增加组，而不是直接更改当前队列。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Note: groups used to be called drawCalls
|
||
|
|
|
||
|
|
<h3>[property:Array drawcalls]</h3>
|
||
|
|
<p>
|
||
|
|
For geometries that use indexed triangles, this Array can be used to split the object
|
||
|
|
into multiple WebGL draw calls. Each draw call will draw some subset of the vertices
|
||
|
|
in this geometry using the configured [page:Material shader]. This may be necessary if,
|
||
|
|
for instance, you have more than 65535 vertices in your object.
|
||
|
|
</p> -->
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Integer id]</h3>
|
||
|
|
<p>当前 bufferGeometry 的唯一编号。</p>
|
||
|
|
|
||
|
|
<h3>[property:BufferAttribute index]</h3>
|
||
|
|
<p>
|
||
|
|
允许顶点在多个三角面片间可以重用。这样的顶点被称为"已索引的三角面片（indexed triangles)。
|
||
|
|
每个三角面片都和三个顶点的索引相关。该 attribute 因此所存储的是每个三角面片的三个顶点的索引。
|
||
|
|
|
||
|
|
如果该 attribute 没有设置过，则 [page:WebGLRenderer renderer] 假设每三个连续的位置代表一个三角面片。
|
||
|
|
|
||
|
|
默认值是 *null*。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Boolean isBufferGeometry]</h3>
|
||
|
|
<p>
|
||
|
|
Read-only flag to check if a given object is of type [name].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Object morphAttributes]</h3>
|
||
|
|
<p>
|
||
|
|
存储 [page:BufferAttribute] 的 Hashmap，存储了几何体 morph targets 的细节信息。<br />
|
||
|
|
Note: Once the geometry has been rendered, the morph attribute data cannot be changed. You will have to call [page:.dispose](), and create a new instance of [name].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Boolean morphTargetsRelative]</h3>
|
||
|
|
<p>
|
||
|
|
Used to control the morph target behavior; when set to true, the morph target data is treated as relative offsets, rather than as absolute positions/normals.
|
||
|
|
|
||
|
|
Default is *false*.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:String name]</h3>
|
||
|
|
<p>
|
||
|
|
当前 bufferGeometry 实例的可选别名。默认值是空字符串。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Object userData]</h3>
|
||
|
|
<p>
|
||
|
|
存储 BufferGeometry 的自定义数据的对象。为保持对象在克隆时完整，该对象不应该包括任何函数的引用。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:String uuid]</h3>
|
||
|
|
<p>
|
||
|
|
当前对象实例的 [link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID]，该值会自动被分配，且不应被修改。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>方法</h2>
|
||
|
|
|
||
|
|
<p>[page:EventDispatcher EventDispatcher] 在该类上可用的所有方法。</p>
|
||
|
|
|
||
|
|
<h3>[method:this setAttribute]( [param:String name], [param:BufferAttribute attribute] )</h3>
|
||
|
|
<p>
|
||
|
|
为当前几何体设置一个 attribute 属性。在类的内部，有一个存储 [page:.attributes] 的 hashmap，
|
||
|
|
通过该 hashmap，遍历 attributes 的速度会更快。而使用该方法，可以向 hashmap 内部增加 attribute。
|
||
|
|
所以，你需要使用该方法来添加 attributes。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined addGroup]( [param:Integer start], [param:Integer count], [param:Integer materialIndex] )</h3>
|
||
|
|
<p>
|
||
|
|
为当前几何体增加一个 group，详见 [page:BufferGeometry.groups groups] 属性。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:this applyMatrix4]( [param:Matrix4 matrix] )</h3>
|
||
|
|
<p> 用给定矩阵转换几何体的顶点坐标。</p>
|
||
|
|
|
||
|
|
<h3>[method:this center] ()</h3>
|
||
|
|
<p>根据边界矩形将几何体居中。</p>
|
||
|
|
|
||
|
|
<h3>[method:BufferGeometry clone]()</h3>
|
||
|
|
<p>克隆当前的 BufferGeometry。</p>
|
||
|
|
|
||
|
|
<h3>[method:this copy]( [param:BufferGeometry bufferGeometry] )</h3>
|
||
|
|
<p>将参数指定的 BufferGeometry 的值拷贝到当前 BufferGeometry 中。</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined clearGroups]( )</h3>
|
||
|
|
<p>清空所有的 groups。</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined computeBoundingBox]()</h3>
|
||
|
|
<p>
|
||
|
|
计算当前几何体的的边界矩形，该操作会更新已有 [param:.boundingBox]。<br />
|
||
|
|
边界矩形不会默认计算，需要调用该接口指定计算边界矩形，否则保持默认值 *null*。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined computeBoundingSphere]()</h3>
|
||
|
|
<p>
|
||
|
|
计算当前几何体的的边界球形，该操作会更新已有 [param:.boundingSphere]。<br />
|
||
|
|
边界球形不会默认计算，需要调用该接口指定计算边界球形，否则保持默认值 *null*。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined computeTangents]()</h3>
|
||
|
|
<p>
|
||
|
|
Calculates and adds a tangent attribute to this geometry.<br />
|
||
|
|
The computation is only supported for indexed geometries and if position, normal, and uv attributes are defined. When using a tangent space normal map, prefer the MikkTSpace algorithm provided by
|
||
|
|
[page:BufferGeometryUtils.computeMikkTSpaceTangents] instead.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined computeVertexNormals]()</h3>
|
||
|
|
<p>通过面片法向量的平均值计算每个顶点的法向量。</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined dispose]()</h3>
|
||
|
|
<p>
|
||
|
|
从内存中销毁对象。 <br />
|
||
|
|
如果在运行是需要从内存中删除 BufferGeometry，则需要调用该函数。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:BufferAttribute getAttribute]( [param:String name] )</h3>
|
||
|
|
<p>返回指定名称的 [page:BufferAttribute attribute]。</p>
|
||
|
|
|
||
|
|
<h3>[method:BufferAttribute getIndex] ()</h3>
|
||
|
|
<p>返回缓存相关的 [page:.index]。</p>
|
||
|
|
|
||
|
|
<h3>[method:Boolean hasAttribute]( [param:String name] )</h3>
|
||
|
|
<p>Returns *true* if the attribute with the specified name exists.</p>
|
||
|
|
|
||
|
|
<h3>[method:this lookAt] ( [param:Vector3 vector] )</h3>
|
||
|
|
<p>
|
||
|
|
vector - 几何体所朝向的世界坐标。<br /><br />
|
||
|
|
|
||
|
|
旋转几何体朝向控件中的一点。该过程通常在一次处理中完成，不会循环处理。典型的用法是过通过调用 [page:Object3D.lookAt] 实时改变 mesh 朝向。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined normalizeNormals]()</h3>
|
||
|
|
<p>
|
||
|
|
几何体中的每个法向量长度将会为 1。这样操作会更正光线在表面的效果。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:BufferAttribute deleteAttribute]( [param:String name] )</h3>
|
||
|
|
<p>删除具有指定名称的 [page:BufferAttribute attribute]。</p>
|
||
|
|
|
||
|
|
<h3>[method:this rotateX] ( [param:Float radians] )</h3>
|
||
|
|
<p>
|
||
|
|
在 X 轴上旋转几何体。该操作一般在一次处理中完成，不会循环处理。典型的用法是通过调用 [page:Object3D.rotation] 实时旋转几何体。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this rotateY] ( [param:Float radians] )</h3>
|
||
|
|
<p>
|
||
|
|
在 Y 轴上旋转几何体。该操作一般在一次处理中完成，不会循环处理。典型的用法是通过调用 [page:Object3D.rotation] 实时旋转几何体。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this rotateZ] ( [param:Float radians] )</h3>
|
||
|
|
<p>
|
||
|
|
在 Z 轴上旋转几何体。该操作一般在一次处理中完成，不会循环处理。典型的用法是通过调用 [page:Object3D.rotation] 实时旋转几何体。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this scale] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
|
||
|
|
<p>
|
||
|
|
缩放几何体。该操作一般在一次处理中完成，不会循环处理。典型的用法是通过调用 [page:Object3D.scale] 实时旋转几何体。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this setIndex] ( [param:BufferAttribute index] )</h3>
|
||
|
|
<p>设置缓存的 [page:.index]。</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined setDrawRange] ( [param:Integer start], [param:Integer count] )</h3>
|
||
|
|
<p>设置缓存的 [page:.drawRange]。详见相关属性说明。</p>
|
||
|
|
|
||
|
|
<h3>[method:this setFromPoints] ( [param:Array points] )</h3>
|
||
|
|
<p>通过点队列设置该 BufferGeometry 的 attribute。</p>
|
||
|
|
|
||
|
|
<h3>[method:Object toJSON]()</h3>
|
||
|
|
<p>返回代表该 BufferGeometry 的 JSON 对象。</p>
|
||
|
|
|
||
|
|
<h3>[method:BufferGeometry toNonIndexed]()</h3>
|
||
|
|
<p>返回已索引的 BufferGeometry 的非索引版本。</p>
|
||
|
|
|
||
|
|
<h3>[method:this translate] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
|
||
|
|
<p>
|
||
|
|
移动几何体。该操作一般在一次处理中完成，不会循环处理。典型的用法是通过调用 [page:Object3D.rotation] 实时旋转几何体。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Source</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
|
||
|
|
</p>
|
||
|
|
</body>
|
||
|
|
</html>
|