用线条连接 Three.js 中的对象答案

【问题标题】：Joining objects in Three.js with lines用线条连接 Three.js 中的对象
【发布时间】：2013-09-26 22:03:32
【问题描述】：

当我尝试使用时： var arrow = new THREE.ArrowHelper(direction, startPoint, startPoint.distanceTo(endPoint), 0xCC0000 ); 场景.add(箭头);

它基本上使用一个点而不是一个对象。有谁知道如何在 three.js 中直接加入对象？

【问题讨论】：

我认为您的问题过于开放，无法提供反馈。试着给我们一些关于你尝试做什么，你已经尝试过什么的想法，也许你会得到更好的结果。例如：您是否要从对象中获取一个点以用于您的用例？您是否希望合并两个或多个对象的几何形状？您是否希望通过父对象组加入对象？无论如何，希望你能解决它。
嗨，Darryl，我正在尝试用three.js 中的线条连接对象。假设我们有两个球体，那么我需要用一条线将它们连接起来。此外，如果我尝试拖动任何球体，则线也应根据运动延伸或压缩。我正在尝试做这样的事情：jsplumbtoolkit.com/dynamicAnchors/jquery.html 但在 3d 中使用 three.js
刚刚注意到您对 Stackoverflow 上的同一件事还有 2 个其他问题。这个不推荐，建议你看看发帖规则，具体here。亲切的问候

【解决方案1】：

好的，无需插入代码，我将提供伪代码中的步骤：

1) 创建 2 个THREE.SphereGeometry，匹配材质，将它们应用到恰当命名的THREE.Mesh。

2) 通过sphere1.geometry.vertices[0] 或您认为最有效的任何点索引存储每个球体中的一个点。

3) 使用这些点来构建您的THREE.ArrowHelper

这应该会让你继续前进。当然，接下来的步骤看起来像这样：

4) 检测用户与每个 Sphere 相交（查看 Raycaster 示例）

5) 构建移动逻辑以重新定位球体

6) 更新场景对象以反映新位置

希望对你有帮助，

【讨论】：

sphere1.geometry.vertices[0] 给出的索引不是实际位置。我的确切问题是如何将箭头绑定到两个对象。我将“webgl_interactive_draggablecubes.html”修改为只有 2 个立方体。
我所做的额外更改是： var sourcePos = new THREE.Vector3(objects[0].position.x, objects[0].position.y, objects[0].position.z ); var targetPos = new THREE.Vector3(objects[1].position.x, objects[1].position.y, objects[1].position.z); var direction = new THREE.Vector3().subVectors(targetPos, sourcePos); var arrow = new THREE.ArrowHelper(direction.clone().normalize(), sourcePos, direction.length(), 0xff0000);场景.add(箭头);但这不会将箭头绑定到任何立方体。当我拖动立方体时，箭头停留在原来的位置。
美好的一天，确实我上面的步骤是伪代码，所以你需要在需要的地方填写空白。请阅读我的原始帖子，您必须自己创建“绑定”。研究我提出的主题，你会没事的。 Stackoverflow 旨在帮助解决问题，而不是租用编码器站点。如果你有一套完整的代码，把它贴出来，我们可以从那里开始。