1

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!

alex747
  • 139
  • 2
  • 12
  • don't know is there any built-in way but if you interested in math algorithm http://stackoverflow.com/questions/828905/polygon-enclosing-a-set-of-points – Madhawa Priyashantha Jun 16 '16 at 13:38
  • I need to make some shape and than relocate different "volumes" in it. I am quite a beginner, but I don't have much time to learn JS and Three.js now. Making algorithms by myself is kind of hard for me, but when I see a code, I have enough skill to debug/edit/understand it. I will look at the link you provided, thank you for info! – alex747 Jun 16 '16 at 14:04
  • you are right.you could find javascript based `convex hull 3d` algorithm already written by someone.but i just found example with three.js here https://www.packtpub.com/packtlib/book/Web-Development/9781784392215/6/ch06lvl1sec32/THREE.ConvexGeometry.also this one http://www.initcode.info/3d_convex_hull_algorithm_similar_to_matlab39_s_convhulln.you can find more examples you don't need to write algorithem – Madhawa Priyashantha Jun 16 '16 at 14:12
  • Possible duplicate of [How to make 3D object from random points using three.js?](http://stackoverflow.com/questions/26067223/how-to-make-3d-object-from-random-points-using-three-js) – Wilt Jun 16 '16 at 17:04
  • @alex747 plz don't forget to accept an answer if it solve your problem – Madhawa Priyashantha Jun 19 '16 at 05:10

1 Answers1

4

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

WestLangley
  • 102,557
  • 10
  • 276
  • 276