从点生成网格Three.js

我试图创建一个三点可点击的形状从点击鼠标产生的一堆点。从点生成网格Three.js

此代码是一种工作的：得到补充

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

的点，我可以得出他们之间的线路我只是无法在该中心填补这样的鼠标可以检测到它！

来源

2017-01-25 user5839

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

var mesh = new THREE.ConvexGeometry(vertices_array);

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

这仅仅是你点的凸包，但它应该是足够满足您的使用情况。

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

three.js r.84

来源

2017-01-25 18:32:51 WestLangley

伟大的这是完美的谢谢。 – user5839

从点云创建网格有多种方法 - 这一切都取决于您的具体需求。我会尽力给你一些关于几种方法的高级概述。

也许一个边界框就够了？根据BBox计算点云和光线投射的边界框。

如果BBox碰巧包含大量没有点的物体，那么您可能需要一个围绕这些点的更紧密的网格。假设射线正在投射，将所有点投影到与射线垂直的平面上，然后使用Gift wrapping algorithm构建该平面上点的2D凸包。现有的库很可能实现了这种算法。使用此算法构造的多边形进行raycast测试。

来源

2017-01-25 10:59:02

有用的感谢。当您看不到点时，我可能会在实况环境中使用边界框方法。 – user5839

从点生成网格Three.js

回答

相关问题