1.BufferGeometry注意

#yyds干货盘点#BufferGeometry的setDrawRange的使用_顶点绘制

2.代码

const MAX_POINTS = 500;
const geometry = new THREE.BufferGeometry();

// attributes
const positions = new Float32Array(MAX_POINTS * 3); // 3 vertices per point
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

const colors = new Float32Array(MAX_POINTS * 3)
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

console.log('geometry', geometry)
console.log('aa', positions === geometry.attributes['position'].array) // tips: true
// 第1个点
positions[0] = 10
positions[1] = 10
positions[2] = -10
// 第2个点
positions[3] = 30
positions[4] = 30
positions[5] = -30
// 第3个点
positions[6] = -30
positions[7] = 30
positions[8] = -30

const red = new THREE.Color('red')
const green = new THREE.Color('green')
const blue = new THREE.Color('blue')

// 第1个点的颜色
colors[0] = red.r
colors[1] = red.g
colors[2] = red.b
// 第2个点的颜色
colors[3] = green.r
colors[4] = green.g
colors[5] = green.b
// 第3个点的颜色
colors[6] = blue.r
colors[7] = blue.g
colors[8] = blue.b

// 设置绘制的范围
geometry.setDrawRange(0, 3); // 从索引值为0开始, 绘制2个顶点数据
// geometry.setDrawRange(2, 1); // 从索引值为2开始, 绘制1个顶点数据

// material -> LineBasicMaterial
const material = new THREE.PointsMaterial({
vertexColors: true,
size: 20
});

const point = new THREE.Points(geometry, material);
scene.add(point);

当设置如下:

geometry.setDrawRange(0, 3); // 从索引值为0开始, 绘制3个顶点数据

此时的效果如下:

可以看到,绘制了3个顶点出来了

#yyds干货盘点#BufferGeometry的setDrawRange的使用_setDrawRange_02

当设置如下:

geometry.setDrawRange(2, 1); // 从索引值为2开始, 绘制1个顶点数据

此时的效果如下:

可以看到,只绘制了一个顶点出来了

#yyds干货盘点#BufferGeometry的setDrawRange的使用_setDrawRange_03

3.注意事项

#yyds干货盘点#BufferGeometry的setDrawRange的使用_three.js_04

4.总结

#yyds干货盘点#BufferGeometry的setDrawRange的使用_顶点绘制_05