alex747 alex747 - 1 year ago 108
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 Source

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!