从THREE.Geometry更改为THREE.BufferGeometry与ThreeJS

Question

嗨，我是Three JS的新手，需要一些帮助。我正在使用我发现的一段代码来创建一个随机点的球体，但由于THREE.Geometry已经贬值，我需要在代码中将THREE.Geometrics更改为THREE.BufferGeometry。

原始代码为：

var pointsGeometry = new THREE.Geometry();
for (var i = 0; i < 1000; i++) {

var vector = new THREE.Vector3();

// for simplicity I have omitted script 
// that would be placed here for creating random 
// values for vector.x, vector.y, vector.z etc etc
pointsGeometry.vertices.push(vector);
}

所以现在我相信我需要使用：

const pointsGeometry = new THREE.BufferGeometry();

但是，我如何将每个向量推送到一个名为"顶点"的pointsGeometry属性中的数组中？

在for循环中，我不能使用：

pointsGeometry.setAttribute( 'vertices', new THREE.Float32BufferAttribute( vector ) );

我想我需要手动创建一个数组"vectorsArray"，并将每个向量推送到for循环中的数组中，然后将其添加到循环之后

pointsGeometry.setAttribute( 'vertices', new THREE.Float32BufferAttribute( vectorsArray ) );

虽然这确实创建了一个顶点属性并添加了一个1000的数组，但当它应该是时，每个值都是NaN

0: Object { x: -21.16441539757467, y: 112.77250047881454, z: -37.63426937227097, … } etc

我已经检查过vectorsArray是否拥有它们所拥有的正确值，但由于某种原因，它们没有被传递到pointsGeometry.setAttribute("顶点"(中。请问我做错了什么？

提前谢谢。

Answer 1

这样试试：

const geometry = new THREE.BufferGeometry();
const points = [];
const point = new THREE.Vector3();
for ( let i = 0; i < 1000; i ++ ) {
point.random();
points.push( point.x, point.y, point.z );
}
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( points, 3 ) );

将此几何体与THREE.Points一起使用时，将创建一个随机点云。