alex747 alex747 - 5 months ago 33
Javascript Question

Multiple random points Three.js

I am constructing a point with a random x,y,z (in a certain min and max for x,y,z).
How can I multiply the point (e.g. 20 points), but the have different values (random)for x,y and z also.

//Math.random() * (max - min) + min
var x = Math.random() * (80 - 1) + 1
var y = Math.random() * (80 - 1) + 1
var z = Math.random() * (80 - 1) + 1


var dotGeometry = new THREE.Geometry();
dotGeometry.vertices.push(new THREE.Vector3( x, y, z));
var dotMaterial = new THREE.PointCloudMaterial( { size: 10, sizeAttenuation: false, color: 0xFF0000 } );
var dot = new THREE.PointCloud( dotGeometry, dotMaterial );
scene.add( dot );


I tried something, but the point multiplies at the same position over and over.

Answer

If you want to create 20 random points, you only have to do the same into a for loop. I've not used Three.js library, but I suppose that it has be something like this:

var NUM_POINTS = 20;
var dots = []; //If you want to use for other task

for (var i = 0 ; i < NUM_POINTS){
    var x = Math.random() * (80 - 1) + 1
    var y = Math.random() * (80 - 1) + 1
    var z = Math.random() * (80 - 1) + 1

    var dotGeometry = new THREE.Geometry();
    dots.push(dotGeometry);
    dotGeometry.vertices.push(new THREE.Vector3( x, y, z));
    var dotMaterial = new THREE.PointCloudMaterial( { size: 10, sizeAttenuation: false, color: 0xFF0000 } );
    var dot = new THREE.PointCloud( dotGeometry, dotMaterial );

    scene.add(dot);
}

More info about for loop here

Good luck!

Comments