javascript - Three.js - 移动其中一个对象时如何保持对象链接？

Question

我试图用 Three.js 表示一个图表，其中节点对象可以通过单击并拖动来移动。 我当前的问题是，创建为 THREE.Line 从一个节点到另一个节点的边不会随节点移动(边应该旋转/改变长度)。

到目前为止我的代码:

var colour = 0x568c4b, geometry = new THREE.BoxGeometry(size, size, size),
    material = new THREE.MeshLambertMaterial({ color: colour }),
    position0 = new THREE.Vector3(-100, -60, 0),
    position1 = new THREE.Vector3(150, 50, 0);

node0 = new THREE.Mesh(geometry, material);
node0.position = position0;
scene.add(node0);
objects.push(node0);

node1 = new THREE.Mesh(geometry, material);
node1.position = position1;
scene.add(node1);
objects.push(node1);

var edge_def = new THREE.Geometry();

/*
 * How to refresh this so that 'edge0' is always connected to 'node0' and 'node1'?
 */
edge_def.vertices.push(node0.position);
edge_def.vertices.push(node1.position);
/*
 */

edge_def.colors.push(new THREE.Color(colour));
edge_def.colors.push(new THREE.Color(colour));
edge0 = new THREE.Line(edge_def, new THREE.LineBasicMaterial({
    linewidth: 5,
    vertexColors: true
}));
scene.add(edge0);

Here是我所做的事情的一个jsfiddle(因为我目前正在学习如何使用 Three.js，我的代码很大程度上基于来自 Threejs.org 的可拖动立方体(www. Threejs.org/examples/#webgl_interactive_draggablecubes)示例)。正如您所看到的，拖动节点立方体可以使边缘保持不变，而它应该始终连接。

因此，如果您能为我提供有关如何做到这一点的资源或示例来帮助我，我将非常感激。

编辑:This这就是我尝试用图片做的事情。

Answer 1

(这实际上并没有回答原来的问题，因为我误解了它。但是当我意识到这一点时，它已经被 3 个人标记为有用，所以我将它保留在这里，以供那些寻找不同问题答案的人使用;-)

如果有人想要将所有对象作为一个整体移动在一起，请使用 Object3D 作为包装器，然后移动该包装器。

var wrapper = new THREE.Object3D();
wrapper.add(node0);
wrapper.add(node1);
wrapper.add(edge0);
scene.add(wrapper);

在这种情况下，您不会将网格直接插入场景中，而是插入整个包装器。