Generar malla a partir de puntos tres.js

Estoy tratando de crear una forma seleccionable en Tres a partir de un montón de puntos generados por el clic del mouse.

Este código es tipo de trabajo:

mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / player.width ) * 2 - 1; mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / player.height ) * 2 + 1 raycaster.setFromCamera( mouse, camera ); var objects = []; objects.push(selectedHotspot); var intersects = raycaster.intersectObjects( objects, true ); if ( intersects.length > 0 ) { var point = new THREE.Mesh( new THREE.SphereGeometry(1, 1, 1), new THREE.MeshBasicMaterial( { color: 0x00ffff } ) ); point.position.copy(intersects[0].point); scene.add(point); points.push(intersects[0].point); } var geometry = new THREE.Geometry(); points.forEach( function( point ){ geometry.vertices.push( point ); }); geometry.vertices.push( points[0] ); geometry.faces.push( new THREE.Face3(0, 1, 2)); // material var material = new THREE.MeshBasicMaterial( { color: 0xffffff } ); // line var line = new THREE.Mesh( geometry, material ); scene.add( line ); hotspots.push( line ); 

Los puntos se agregan, puedo dibujar líneas entre ellos, ¡simplemente no puedo rellenar el centro para que el mouse pueda detectarlo!

Puede crear una malla a partir de puntos utilizando THREE.ConvexGeometry .

 var mesh = new THREE.ConvexGeometry( vertices_array ); 

Ver, por ejemplo, http://threejs.org/examples/webgl_geometry_convex.html

Este es solo el casco convexo de sus puntos, pero debería ser suficiente para su caso de uso.

Debe incluir los examples/js/geometries/ConvexGeometry.js archivo three.js examples/js/geometries/ConvexGeometry.js explícitamente en su código fuente.

tres.js r.84

Existen diferentes formas de crear una malla a partir de una nube de puntos: todo depende de cuáles sean sus necesidades específicas. Trataré de darle una descripción general de alto nivel de algunos enfoques.

Tal vez un cuadro delimitador es suficiente? Calcule el cuadro delimitador de la nube de puntos y raycast contra el BBox.

Si el BBox contiene grandes volúmenes que no tienen puntos, es posible que necesite una malla más ajustada alrededor de estos puntos. Dado el rayo que se está emitiendo, proyecte todos los puntos en un plano normal al rayo, luego construya el casco convexo 2D de los puntos en este plano utilizando el algoritmo de envoltura de regalos . Probablemente hay bibliotecas existentes que implementan este algoritmo. Utilice el polígono construido por este algoritmo para la prueba de raycast.