Hey there, I'm a beginner in the world of Three JS and could really use some assistance. I stumbled upon a piece of code that allows me to generate a sphere with random points, but it seems like I need to make an adjustment. The problem is that THREE.Geometry has been deprecated, so I have to switch to using THREE.BufferGeometry instead.
The original code looks like this:
var pointsGeometry = new THREE.Geometry();
for (var i = 0; i < 1000; i++) {
var vector = new THREE.Vector3();
// some code for generating random values for vector.x, vector.y, vector.z etc
pointsGeometry.vertices.push(vector);
}
Now, it seems like I should be using:
const pointsGeometry = new THREE.BufferGeometry();
But how can I push each vector into an array within an attribute called 'vertices' of pointsGeometry?
Within the loop, I tried:
pointsGeometry.setAttribute( 'vertices', new THREE.Float32BufferAttribute( vector ) );
I thought maybe I needed to manually create an array named 'vectorsArray', push each vector into it within the loop, and then set it afterwards:
pointsGeometry.setAttribute( 'vertices', new THREE.Float32BufferAttribute( vectorsArray ) );
Even though this approach does create a vertices attribute and adds an array of 1000, each value turns out to be NaN when it should be something like:
0: Object { x: -21.16441539757467, y: 112.77250047881454, z: -37.63426937227097, … } etc
I've double-checked that vectorsArray contains the correct values, but they don't seem to be passed into pointsGeometry.setAttribute( 'vertices'). Any idea what I might be doing wrong? Thanks a lot!