Question

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

然后我找到了一个使用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);
  });
};

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

1 个答案: