Three.js Canvas Lines Example Tweak

Question

This is most likely better posted in a forum, but the Three.js Google Group seems dead and I'm not aware of any others so apologies in advance. Feel free to let me know of a better place to post more generic questions.

I'm curious how one would make this example: http://threejs.org/examples/#canvas_lines fill a cube's space instead of a sphere? Is there an easy way to go about this with this example or would it require a lot of changes?

Answer 1

Replace this code:

particle.position.x = Math.random() * 2 - 1;
particle.position.y = Math.random() * 2 - 1;
particle.position.z = Math.random() * 2 - 1;
particle.position.normalize();
particle.position.multiplyScalar( Math.random() * 10 + 450 );

With this:

particle.position.x = Math.random() * 500 - 250;
particle.position.y = Math.random() * 500 - 250;
particle.position.z = Math.random() * 500 - 250;

This code places the points at the edges of the box:

particle.position.x = Math.random() * 2 - 1;
particle.position.y = Math.random() * 2 - 1;
particle.position.z = Math.random() * 2 - 1;
particle.position.normalize();
particle.position.multiplyScalar( 500 );
particle.position.clamp(
    new THREE.Vector3( -250, -250, -250 ),
    new THREE.Vector3(  250,  250,  250 )
);