Three.js shape from random points

Question

I have a N number of random points (in this case 20), with a X,Y and Z constrains.

How can I create ANY (preferably closed) shape (using Three.js library) , given and starting only from N random points.

There are probably many variants, please share yours.

var program = new Program(reset,step)
program.add('g',false)
function reset() {
  scene.clear()
  scene.add(new THREE.GridHelper(100,1))
}
function step() {

}


program.startup()



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

for (var i = 0 ; i < numpoints ; i++){
    var x = Math.random() * (80 - 1) + 1    //Math.random() * (max - min) + min
    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.PointsMaterial( { size: 3, sizeAttenuation: false, color: 0xFF0000 } );
    var dot = new THREE.Points( dotGeometry, dotMaterial );

    scene.add(dot);
}

Triangulation, Voronoi, I don't care, just show me ANY ideas you have, will help me learn a lot!

Answer 1

You can create a polyhedron which is the convex hull of a set of 3D points by using a pattern like so:

var points = [
    new THREE.Vector3( 100, 0, 0 ),
    new THREE.Vector3( 0, 100, 0 ),
    ...
    new THREE.Vector3( 0, 0, 100 )
];

var geometry = new THREE.ConvexGeometry( points );

var material = new THREE.MeshPhongMaterial( {
    color: 0xff0000, 
    shading: THREE.FlatShading
} );

mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

You must include the following in your project

<script src="/examples/js/geometries/ConvexGeometry.js"></script>

three.js r.78