从点云生成网格 Three.js

Question

我试图从鼠标点击生成的一组点中创建一个可点击的Three形状。

这段代码基本上能够工作：

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 );

这些点被添加了，我可以在它们之间画线，但我无法填充中间区域以便鼠标可以检测到它！

- beek

Answer 1

你可以使用THREE.ConvexGeometry从点创建网格。

var mesh = new THREE.ConvexGeometry( vertices_array );

例如，参见https://threejs.org/examples/webgl_geometry_convex.html

这只是您点的凸包，但对于您的用例应该已经足够了。

您必须在源代码中明确地包含examples/jsm/geometries/ConvexGeometry.js文件。

three.js r.147

- WestLangley

Answer 2

有多种方法可以从点云创建网格 - 这完全取决于您的具体需求。我将尝试为您概述几种方法。

也许一个边界框就足够了？计算点云的边界框并对其进行光线投射。

如果包围盒恰好包含大量没有点的体积，则可能需要在这些点周围拟合更紧密的网格。给定正在投射的射线，将所有点投影到与射线垂直的平面上，然后使用Gift wrapping algorithm构造此平面上点的2D凸包。很可能已经存在实现此算法的库。使用此算法构建的多边形进行光线投射测试。

- Stefan Dragnev

---

非常感谢。当您无法看到点时，我可能会在实时环境中使用边界框方法。 - beek

你是否知道某种收缩包装算法，可以在给定阈值的情况下对凸包进行收缩包装？ - trusktr