three.js 源码注释（二十七）Core/BufferGeometry.js

最新推荐文章于 2024-07-17 15:03:55 发布

商域无疆

最新推荐文章于 2024-07-17 15:03:55 发布

阅读量1w

点赞数 4

分类专栏： three.js webgl javascript 库 THREE.JS源码注释文章标签： javascript three.js web3d webgl 源码

本文链接：https://blog.csdn.net/omni360/article/details/41576797

版权

本文详细注解了THREE.JS库中Core模块的BufferGeometry.js文件，探讨其在Web3D和WebGL开发中的关键作用。适合对three.js感兴趣的开发者学习，了解数据结构在3D图形渲染中的应用。

摘要由CSDN通过智能技术生成

商域无疆 (http://blog.csdn.net/omni360/)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：商域无疆 - 本博客专注于敏捷开发及移动和物联设备研究：数据可视化、GOLANG、Html5、WEBGL、THREE.JS，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。

俺也是刚开始学,好多地儿肯定不对还请见谅.

以下代码是THREE.JS 源码文件中Core/BufferGeometry.js文件的注释.

/**
 * @author alteredq / http://alteredqualia.com/
 */
/*
///BufferGeometry类用来和BufferAttribute配合使用,更多细节可以参考官方的样例http://threejs.org/
/// 这个类是另一种创建几何体对象的方式,它将所有的数据包括顶点位置,法线,面,颜色,uv和其它的自定义属性存在缓冲区,
/// 这样可以减少GPU的负荷,BufferGeometry同样也比Geometry对象复杂,增加了使用的难度,这里的属性都是存放在数组中,
/// 比如顶点位置不是Vector3对象,颜色也不是color对象,而是数组.需要访问这些属性,需要从属性缓冲区中读原始数据.
/// NOTE:根据BufferGeometry类特性,我们在创建一些静态对象,实例化后不经常操作的对象时,选择这个类.
///
///
///Example
			var geometry = new THREE.BufferGeometry(); 

			// create a simple square shape. We duplicate the top left and bottom right 
			// vertices because each vertex needs to appear once per triangle. 

			var vertexPositions = [ [-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] ]; 

			var vertices = new Float32Array( vertexPositions.length * 3 ); 
			// three components per vertex 
			// components of the position vector for each vertex are stored 
			// contiguously in the buffer. 

			for ( var i = 0; i < vertexPositions.length; i++ ) { 
				vertices[ i*3 + 0 ] = vertexPositions[i][0]; 
				vertices[ i*3 + 1 ] = vertexPositions[i][1]; 
				vertices[ i*3 + 2 ] = vertexPositions[i][2]; 
			} 

			// itemSize = 3 because there are 3 values (components) per vertex 

			geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) ); 
			var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); 
			var mesh = new THREE.Mesh( geometry, material );
///
///
///
*/
///<summary>BufferGeometry</summary>
///<returns type="BufferGeometry">返回在缓冲区创建的几何体对象</returns>
THREE.BufferGeometry = function () {

	this.id = THREE.GeometryIdCount ++;	//BufferGeometryy对象id属性.
	this.uuid = THREE.Math.generateUUID();	//调用THREE.Math.generateUUID()方法,BufferGeometry对象uuid(通用唯一识别码)属性,

	this.name = '';		//BufferGeometry对象name属性,可以为当前对象定义一个名称,初始化为''

	this.attributes = {};	//BufferGeometry对象attributes属性,可以为当前对象定义一个名称,初始化为{}
	this.drawcalls = [];	//WebGL分区块绘制,存放区块的数组
	this.offsets = this.drawcalls; // backwards compatibility 向后兼容
									//WebGL分区块绘制,存放区块的数组

	this.boundingBox = null;	//立方体界限,根据当前几何体生成的立方体界限	{ min: new THREE.Vector3(), max: new THREE.Vector3() }
	this.boundingSphere = null;	//球体界限,根据当前几何体生成的球体界限	{ radius: float }

};

/****************************************
****下面是BufferGeometry对象提供的功能函数.
****************************************/
THREE.BufferGeometry.prototype = {

	constructor: THREE.BufferGeometry,	//构造器,返回对创建此对象的BufferGeometry函数的引用

	/*
	///addAttribute方法给BufferGeometry对象添加属性信息.
	*/
	///<summary>addAttribute</summary>
	///<param name ="name" type="String">属性名称</param>
	///<param name ="attribute" type="THREE.BufferAttribute">属性对象</param>
	///<returns type="Object3D">返回添加过属性BufferGeometry对象</returns>
	addAttribute: function ( name, attribute ) {

		if ( attribute instanceof THREE.BufferAttribute === false ) {	//如果参数attribute不是THREE.BufferAttribute对象
			//提示用户参数错误.使用正确的对象
			console.warn( 'THREE.BufferGeometry: .addAttribute() now expects ( name, attribute ).' );

			this.attributes[ name ] = { array: arguments[ 1 ], itemSize: arguments[ 2 ] };

			return;		//直接返回

		}

		this.attributes[ name ] = attribute;	//返回添加过属性BufferGeometry对象

	},

	/*
	///getAttribute方法根据属性名(参数name)返回BufferGeometry对象的属性信息.
	*/
	///<summary>getAttribute</summary>
	///<param name ="name" type="String">属性名称</param>
	///<returns type="THREE.BufferAttribute">返回BufferGeometry对象的属性</returns>
	getAttribute: function ( name ) {

		return this.attributes[ name ];	//返回BufferGeometry对象的属性

	},

	/*
	///addDrawCall方法将使用三角面构建的BufferGeometry对象.拆分成多个部分多次调用WebGL绘制,每次调用WebGL绘制将使用当前几何体的顶点数组的子集来配置着色器.
	///这种做法非常有意义,比如你的几何体对象有65535个以上的顶点,WebGL将一次绘制调用的最大顶点限制为65535个.如果将对象拆分成几部分,就不会出问题了.
	///被拆分的每部分生成这样一种结构组成的数组:{ start: Integer, count: Integer, index: Integer } 
	///start重新指定在绘制调用第一个顶点索引，
	///count指定多少个顶点都包括在内，
	///index指定一个可选的偏移。
	///NOTE:使用adddrawcall添加绘制调用，而不是直接修改此数组。
	*/
	///<summary>addDrawCall</summary>
	///<param name ="start" type="Number">start重新指定在绘制调用第一个顶点索引，</param>
	///<param name ="count" type="Number">count指定多少个顶点都包括在内，</param>
	///<param name ="indexOffset" type="Number">index指定一个可选的偏移。</param>
	///<returns type="Array">返回{ start: Integer, count: Integer, index: Integer } 结构组成的数组</returns>
	addDrawCall: function ( start, count, indexOffset ) {

		this.drawcalls.push( {

			start: start,	//start重新指定在绘制调用第一个顶点索引，
			count: count,	//count指定多少个顶点都包括在内，
			index: indexOffset !== undefined ? indexOffset : 0 //index指定一个可选的偏移。

		} );

	},

	/*
	///applyMatrix方法对BufferGeometry对象的vertices顶点应用矩阵变换.达到旋转,缩放,移动的目的.
	*/
	///<summary>applyMatrix</summary>
	///<param name ="matrix" type="Matrix4">仿射矩阵</param>
	///<returns type="BufferGeometry">返回新的BufferGeometry对象</returns>
	applyMatrix: function ( matrix ) {

		var position = this.attributes.position;

		if ( position !== undefined ) {

			matrix.applyToVector3Array( position.array );
			position.needsUpdate = true;	// 将属性position.needsUpdate设置为true

		}

		var normal = this.attributes.normal;

		if ( normal !== undefined ) {

			var normalMatrix = new THREE.Matrix3().getNormalMatrix( matrix );

			normalMatrix.applyToVector3A