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是我所做的事情（因为我目前正在学习如何使用three.js，我的代码很大程度上基于可拖动的多维数据集（www.threejs.org/examples/#webgl_interactive_draggablecubes））例如来自threejs.org）。正如您所看到的，拖动节点立方体可以在始终连接时保持边缘不变。

因此，如果您可以通过向我指出有关如何执行此操作的资源或示例来提供帮助，我将非常感激。

编辑：This是我尝试用图片做的。

Answer 1

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

如果有人想将所有对象一起移动，那么使用Object3D作为包装器，然后移动该包装器。

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

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

Answer 2

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

我更新了您的jsFiddle代码，因此您应该立即看到它。

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 - 移动其中一个时如何保持对象链接？

2 个答案: