從點生成網格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

回答

相關問題