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

我试图用three.js表示一个图形，在这里，可以通过单击和拖动来移动节点和对象。 我当前的问题是，创建为三条边的边。从一个节点到另一个节点的线不会随节点移动（边应旋转/更改长度）

到目前为止，我的代码是：

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);

是我所做工作的一部分（因为我目前正在学习如何使用three.js，我的代码主要基于threejs.org中的DragableCubes（www.threejs.org/examples/#webgl_interactive_DragableCubes）示例）。如您所见，拖动节点立方体可以使边在应始终连接时保持不变

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

编辑：这是我试图用图片来做的。

（这实际上不是问原始问题，因为我误解了它。但当我意识到，它已经被3个人标记为有用，所以我将它保存在这里，供人们寻找一个稍微不同的问题的答案；-）

如果有人希望将所有对象作为一个整体移动到一起，则使用Object3D作为包装器，然后移动该包装器

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

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

（这实际上并不是问原始问题，因为我误解了它。但当我意识到，它已经被3个人标记为有用，所以我将它保留在这里，供人们寻找一个稍微不同的问题的答案；-）

如果有人希望将所有对象作为一个整体移动到一起，则使用Object3D作为包装器，然后移动该包装器

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

---

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

您的问题是因为THREE.JS出于性能原因几乎缓存了所有内容。包括几何图形。您必须通过将几何体的属性verticesNeedUpdate设置为true来告知渲染器线几何体已更改

我更新了你的代码，所以你现在应该可以看到它工作了

onDocumentMouseMove函数只需要一行额外的代码：

if (SELECTED) {
    intersects = raycaster.intersectObject(plane);
    SELECTED.position.copy(intersects[0].point.sub(offset));
    edge0.geometry.verticesNeedUpdate = true; //THIS WILL TELL RENDERER THAT GEOMETRY HAS CHANGED
    return;
}

---

您的问题是由于THREE.JS出于性能原因几乎缓存了所有内容。包括几何图形。您必须通过将几何体的属性verticesNeedUpdate设置为true来告知渲染器线几何体已更改

我更新了你的代码，所以你现在应该可以看到它工作了

onDocumentMouseMove函数只需要一行额外的代码：

if (SELECTED) {
    intersects = raycaster.intersectObject(plane);
    SELECTED.position.copy(intersects[0].point.sub(offset));
    edge0.geometry.verticesNeedUpdate = true; //THIS WILL TELL RENDERER THAT GEOMETRY HAS CHANGED
    return;
}

---

谢谢你的回答，我会尝试使用这个建议，并将结果通知你。嗯，看起来这个包装器方法在三个部分中创建了一个单独的对象。所以我的问题一定是措词不当，对不起。。。我尝试做的是，当移动节点时，边将在移动节点和非移动节点之间进行自我调整-它可能必须旋转（围绕固定节点）并展开（以保持固定节点和移动节点之间的连接）。我是编辑主要问题，还是在这里可以？谢谢你的回答，我会尝试使用这个建议，并将结果通知你。嗯，看起来这个包装方法在三个部分中创建了一个对象。所以我的问题一定是措词不当，对不起。。。我尝试做的是，当移动节点时，边将在移动节点和非移动节点之间进行自我调整-它可能必须旋转（围绕固定节点）并展开（以保持固定节点和移动节点之间的连接）。我是编辑主要问题，还是在这里可以？再次感谢，这正是我要找的。再次感谢，这正是我要找的。