如何在three.js中为对象添加边？

Question

我刚开始使用 three.js 制作基本动画，需要一些帮助来绘制图形（框）的边缘。为此，我找到了一种在创建盒子时将 THREE.MeshBasicMaterial 的“线框”属性设置为“真”的方法。不幸的是，它对我不起作用，因为我不想显示盒子每个面的对角线。

然后我找到了一个替代方案，它使用了 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/

你能给我一些关于如何执行我想要的建议吗？ 我一直在寻找解决方案，但还没有找到。

非常感谢。

Answer 1

帮助器的设计目的不是超出不可变的 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);
  });
};