Three.js: Putting smaller objects on random positions of a larger sphere

Question

In Three.js (which uses JavaScript/ WebGL), given a bigger sphere -- with a radius of say 200 -- how would I position a number of smaller objects (spheres, in my case) on random outside positions of this sphere? For instance, imagine the sphere being a world, and there are small spheres resting in random positions on the ground of this world.

Thanks!

score 5 · Answer 1 · edited May 23 '17 at 12:25

I made a GeometryUtils method for getting random points on a mesh, you could just use this:

https://github.com/mrdoob/three.js/blob/master/src/extras/GeometryUtils.js#L304

var points = THREE.GeometryUtils.randomPointsInGeometry( geometry, nPoints );

It's more complicated than sphere-specific solution but it will give you points that are always on the real mesh (as opposed to points being on perfect geometrical sphere, which for example if you deal with planetary sized mesh, may be off).

Another option for getting more precise points directly on the mesh would be to generate random points on a larger sphere and then raycast them toward sphere center.

Though if you don't care too much about precision, simple geometry methods should be enough.

BTW mrdoob's method is good but it should have an extra step of rejecting vectors with length > 1 (see hypercube rejection method).

http://local.wasp.uwa.edu.au/~pbourke/geometry/spherepoints/

Random Point on a given Sphere

See also here for some other methods how to generate random points on a sphere:

http://www.math.niu.edu/~rusin/known-math/96/sph.rand

score 4 · Answer 2 · edited Dec 23 '16 at 11:31

4

If it's just for a sphere I would do this:

sphere.position.x = Math.random() * 2 - 1;
sphere.position.y = Math.random() * 2 - 1;
sphere.position.z = Math.random() * 2 - 1;
sphere.position.normalize();
sphere.position.multiplyScalar( 200 );

edited Dec 23 '16 at 11:31

neoDev

2,879
3
33
66

answered Jun 14 '12 at 18:36

mrdoob

19,334
4
63
62

score 0 · Answer 3 · answered Jun 14 '12 at 18:30

Just thought of one solution, though perhaps not the best: getting random vertices from the larger square, and position the smaller objects at those points. Like:

var max = this.sphere.geometry.vertices.length;
for (var i = 0; i < max; i++) {
    if ( Misc.getChance(5) ) {
        var vertex = this.sphere.geometry.vertices[i];
        var sphere = new THREE.Mesh(geometry, material);
        sphere.position.set(vertex.x, vertex.y, vertex.z);
        scene.add(sphere);
    }
}

Putting the objects in a group, then scaling the group, will move them a bit higher above ground:

spheresGroup.scale.x = spheresGroup.scale.y = spheresGroup.scale.z = 1.05;

Possibly not a very good solution.

Three.js: Putting smaller objects on random positions of a larger sphere

3 Answers3