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を超えて機能するようには設計されていません。

EDIT新しいフィドルとコード。 sceneに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); 
    }); 
};