Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ThreeJS Dynamic Line Change

In ThreeJS, I have a rotating cube which consists of a bunch of particles. The particles are part of a particle array called particles, and they are also part of a group called group which is rotating around the origin on the x, y, and z. I was wondering how to connect two particles with a line dynamically. The code I currently have to try and do this is below, and it doesn't work.

        var geometry2 = new THREE.Geometry();

            linemat = new THREE.LineBasicMaterial({
                color: 0xffffff
            });
            geometry2.vertices.push(particles[4].position);
            geometry2.vertices.push(particles[1000].position);  
            geometry2.update;           
            line = new THREE.Line(geometry2, linemat);
            scene.add(line);          

This is inside of my render loop. However, it only draws one line where the particles were. As the cube rotates, the line just stays in space, not touching the points. It won't update, either.

Any help would be appreciated. Thanks

like image 859
user2186697 Avatar asked Oct 02 '22 23:10

user2186697


1 Answers

Building on your current thinking, I would create the line outside of your render loop, then update its geometry inside your render loop. Note that to tell a Geometry that its vertices are updated, you need to set the verticesNeedUpdate flag to true (r61). In your code above, you have a statement geometry2.update which doesn't do anything (it's not calling a method or updating a value, and the update property doesn't exist in any case).

Alternatively, you can just add the line to the group that is rotating, and it should rotate along with it.

like image 50
IceCreamYou Avatar answered Oct 12 '22 12:10

IceCreamYou