Three.js更新TubeGeometry对象的网格

Question

我正在尝试创建一个管道，并具有与该管道交互的能力，例如拖动鼠标以更改管道的起点/终点。为此，我直接修改顶点位置值，并希望更新场景中的对象。

然而，我遇到了一个问题：我使用的管道对象在更新路径点时，网格对象不会在屏幕上更新，因此似乎无法在创建后对其进行修改。

我的3D对象创建大致如下：

var curve = new THREE.SplineCurve3([new THREE.Vector3(x, y, z), new THREE.Vector3(x2, y2, z2)]);
var geometry = new THREE.TubeGeometry(curve, segments, 2, radiusSegments, closed);
geometry.dynamic = true;
var tubeMesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [new THREE.MeshBasicMaterial({color: 0xffffff, opacity: 1, transparent: true})]);
scene.add(tubeMesh);    

当我想要更新积分时，我会这样做：

tubeMesh.children[0].geometry.path.points[0] = new THREE.Vector3(x4, y4, z4));
tubeMesh.children[0].geometry.path.points[1] = new THREE.Vector3(x3, y3, z3));
tubeMesh.children[0].geometry.verticesNeedUpdate = true;

然而，当我做出改变时，对象似乎没有在屏幕上更新。使用管道是否可能实现这一点？

- user1533481

Answer 1

您只提供了代码片段，但可能需要

geometry.verticesNeedUpdate = true;

并且。

geometry.dynamic = true;

关于如何使用WebGLRenderer更新内容，您可以在Three.js维基百科中找到更多详细信息和示例。

https://github.com/mrdoob/three.js/wiki/Updates

- WestLangley

---

我之前确实读过那篇文章，并且在我的代码中也包含了你提到的代码。看起来verticeNeedUpdate只有在vertices属性改变时才会被应用。而在这里，我正在改变geo的path属性。这里的人们和我一样遇到了同样的问题 https://github.com/mrdoob/three.js/issues/1965 - user1533481

创建一个简单的jsfiddle怎么样？ - WestLangley

我在这里创建了一个：http://jsfiddle.net/drsagitn/dC5KA/2/。点数在mouseup事件上更新。谢谢。 - user1533481

这是一个可工作的JSFiddle示例：http://jsfiddle.net/kWw68/3/。拉伸路径仅用于构建几何体，你需要更新网格几何本身，而不是路径。（将路径命名为“tube”导致了一些混淆。）我_希望_你能接受这个答案来回答你的问题。 - WestLangley

非常感谢提供的jsfiddle。虽然这确实是一种更新Tube的方法，但我认为对于用户来说并不实用。因为当用户需要更新时，他更愿意更新路径点，而不是循环遍历所有顶点并计算每个顶点的新位置。所以在这种情况下，我可能需要使用新几何体重新创建网格？ - user1533481

是的，最好使用新几何图形重新创建网格。 - WestLangley