ThreeJs的学习：BufferGeometry理解（2），Index与postion的关系，以及groups的理解

webgl_buffergeometry_indexed.html

例子1

var segments_Shuliang = 2;
var geometry = new THREE.BufferGeometry();
geometry.setIndex( [1, 0, 4, 0, 3, 4, 2, 1, 5, 1, 4, 5, 4, 3, 7, 3, 6, 7, 5, 4, 8, 4, 7, 8] );
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [-10, 10, 0, 0, 10, 0, 10, 10, 0, -10, -0, 0, 0, -0, 0, 10, -0, 0, -10, -10, 0, 0, -10, 0, 10, -10, 0], 3 ) );
geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1], 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( [0, 0, 1, 0.5, 0, 1, 1, 0, 1, 0, 0.5, 1, 0.5, 0.5, 1, 1, 0.5, 1, 0, 1, 1, 0.5, 1, 1, 1, 1, 1], 3 ) );

var material = new THREE.MeshPhongMaterial( {
					side: THREE.DoubleSide,
					vertexColors: THREE.VertexColors
} );
mesh = new THREE.Mesh( geometry, material );

 

例子2

没有【normal】和【color】的Attribute，也能形成图形，不是说normal没什么用，其实很重要的。
关于normal参考threejs的例子webgl_geometry_normals

下面关注的是【Index】和【postion】的含义了。
Position是每个点的坐标，下面例子有9个Position，编号0~8
index是说明一个三角形由哪三个Position组成。详细说明参考例子3

var geometry = new THREE.BufferGeometry();
geometry.setIndex( [
	1, 0, 4, 
	0, 3, 4, 
	2, 1, 5, 
	1, 4, 5, 
	4, 3, 7, 
	3, 6, 7, 
	5, 4, 8, 
	4, 7, 8] );
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [
	-10, 10, 0,  // 0
	0, 10, 0,    // 1
	10, 10, 0,   // 2
	-10, -0, 0,  // 3
	0, -0, 0,    // 4
	10, -0, 0,   // 5
	-10, -10, 0, // 6
	0, -10, 0,   // 7
	10, -10, 0   // 8
	], 3 ) );
// geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1], 3 ) );
// geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( [0, 0, 1, 0.5, 0, 1, 1, 0, 1, 0, 0.5, 1, 0.5, 0.5, 1, 1, 0.5, 1, 0, 1, 1, 0.5, 1, 1, 1, 1, 1], 3 ) );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );				mesh = new THREE.Mesh( geometry, material );

例子3 

全部用【postion】
例子2的【Index】和【postion】转换成新的【postion】，不需要【Index】。

var bgeometry = new THREE.BufferGeometry();
var vertices = new Float32Array( [
	// 三角形
	0, 10, 0,    // 1
	-10, 10, 0,  // 0
	0, -0, 0,    // 4

	// 三角形
	-10, 10, 0,  // 0
	-10, -0, 0,  // 3
	0, -0, 0,    // 4

	// 三角形
	10, 10, 0,   // 2
	0, 10, 0,    // 1
	10, -0, 0,   // 5

	// 三角形
	0, 10, 0,    // 1
	0, -0, 0,    // 4
	10, -0, 0,   // 5

	// 三角形
	0, -0, 0,    // 4
	-10, -0, 0,  // 3
	0, -10, 0,   // 7

	// 三角形
	-10, -0, 0,  // 3
	-10, -10, 0, // 6
	0, -10, 0,   // 7

	// 三角形
	10, -0, 0,   // 5
	0, -0, 0,    // 4
	10, -10, 0,  // 8

	// 三角形
	0, -0, 0,    // 4
	0, -10, 0,   // 7
	10, -10, 0   // 8
] );
//材质
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
bgeometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
var mesh = new THREE.Mesh( bgeometry, material );

groups指的是每一个面的顶点数据，这里的顶点指的是用index和attribute数据重组之后的完整的顶点数据。

在完整的顶点数据之下，每一个面是从那个顶点开始，由多少个顶点组成，materialIndex是应该指顶点数组的索引。

比如，如下图，第一个面是从0顶点开始，由6个顶点组成，这个就是一组，用materialIndex标记。