How can I get the particular point in a THREE.Points object to change his position?

user_10453227 0
Viewed 58

I work on a personal project to try out equations to try to simulate the behavior of a galaxy. I have so far managed to place the Points as I wanted, but now I want to take each point individually to change its position. The goal for now is just to successfully try to apply a Random Vector to each of the points. I tried:

var direction = new THREE.Vector3(0.00003, 0.000005, 0);
points.position.add(direction);

but this applies to all Points. Then I tried something like that:

for (let i = 0; i < points.geometry.attributes.position.count; i++) {
    points.geometry.attributes.position[i] = Math.random() * 500
}
points.geometry.attributes.position.needsUpdate = true;

But nothing append :( I thing I missed something but I dind't know what

Here the full code on codepen: Codepen

three.js javascript
1 Answers

When you access:

points.geometry.attributes.position[i]

you're not getting the array of the vertex positions. You're getting the BufferAttribute. What you probably want is the array inside the BufferAttribute:

points.geometry.attributes.position.array[i]

However, this is still not the recommended approach. Three.js recommends you use the .getAttribute() method:

// Get the attribute
const posAttribute = points.geometry.getAttribute("position");

// Get the array inside the attribute
const posArray = posAttribute.array;

// Increment by 3 at a time to access XYZ separately
for(let i3 = 0; i3 < posArray.length; i3 += 3) {
    posArray[i3 + 0] = xPosition;
    posArray[i3 + 1] = yPosition;
    posArray[i3 + 2] = zPosition;
}

// Tell the attribute it needs updatin
posAttribute.needsUpdate = true;
user_26085150
Related