如何在three.js中添加邊對象？

我剛開始使用three.js來製作基本的動畫，並需要一些幫助來繪製圖形（框）的邊緣。所以要做到這一點，我創建了一個方法，在創建方框時將THREE.MeshBasicMaterial的「線框」屬性設置爲「true」。不幸的是，它不適用於我，因爲我不想顯示框的每個面的對角線。如何在three.js中添加邊對象？

然後我找到了一個替代方案，它使用了THREE.EdgesHelper類，它顯示了我想要的邊，但我還有另一個問題。

事情是，我需要改變一些框的面的位置，並保持邊緣更新與此更改但邊緣不這樣做。

const cubeWidth = 3; 
const geometry = new THREE.BoxGeometry(cubeWidth, cubeWidth, 20); 
const material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors }); 
const cube = new THREE.Mesh(geometry, material); 
const edge = new THREE.EdgesHelper(cube, 0x000000);

然後我更新的每個箱子上渲染功能臉的正面：

cubes.forEach(function(cube) { 
const geometry = cube.children[0].geometry; 

geometry.vertices.forEach(function(v) { 
    if(v.z > 0) v.x -= 3; 
}); 

geometry.verticesNeedUpdate = true; 
});

我做了一個的jsfiddle，顯示問題：https://jsfiddle.net/mauro98/wf20tmhu/139/

你能不能給我任何建議，就如何執行我想要的？我一直在尋找解決方案，但無法找到它。

非常感謝。

來源

2016-08-24 Mauro Aguilar

幫助程序的設計目的不是爲了超越不變的bufferGeometry。

編輯新的小提琴和代碼。更改了代碼以處理將edgeHelper放置在場景中並跟蹤它以便在userData中刪除。

https://jsfiddle.net/uuzcmn99/

widget.onSliderChange = function() { 
    const cubes = widget.cubeMatrix.children; 
    cubes.forEach(function(cube) { 
    console.log(cube); 
    const geometry = cube.geometry; 
    geometry.vertices.forEach(function(v) { 
     if(v.z > 0) v.x -= 3; 
    }); 
    cube.scale.set(.5,.5,.5); 
    geometry.verticesNeedUpdate = true; 
    console.log(cube.userData, widget.scene); 
    cube.userData.edgeHelper.geometry.dispose(); 
    cube.userData.edgeHelper.material.dispose(); 
    widget.scene.remove(cube.userData.edgeHelper); 
    const edge = new THREE.EdgesHelper(cube, 0x000000); 
    edge.material.linewidth = 1.5; 
    cube.userData.edgeHelper = edge; 
    widget.scene.add(edge); 
    }); 
};

來源

2016-08-25 03:34:17 Radio

要小心！（1）助手必須直接添加場景的一個孩子。（2）當你移除它們時，你必須正確地「處理（）」對象。 – WestLangley

將輔助者添加到場景的孩子而不是場景的風險是什麼？你有一個處理助手的例子嗎？ – Radio

（1）風險是幫助者在網格變形時不能正確渲染。在你的小提琴中嘗試它。（2）https://github.com/mrdoob/three.js/blob/master/examples/webgl_test_memory.html。 – WestLangley

如何在three.js中添加邊對象？

回答

相關問題