创建可以从末端修改的线

Question

所以我想创建一些可以从连接它们的点进行修改的线。

初始状态示例

第一个向下移动，第二个向上移动，第三个向右向下移动。

在实现方面，我目前有两个网格。第一个被拉伸，以便覆盖从起点到下一个点的距离，第二个标记起点。

var meshLine = new THREE.Mesh(boxGeometry, material);
meshLine.position.set(x,y,z);
meshLine.scale(1,1,distancetonextpoint);

var meshPoint = new THREE.Mesh(sphereGeometry, material);
meshPoint.position.set(x,y,z);
meshPoint.scale(2,2,2);

我想要的是，当用户拖动圆点时，其他线会根据被拖动的线拉伸或改变它们的位置。

有没有更合理的解决方案，因为我觉得我的不太好和干净。我必须做很重的工作才能完成运动。

我也看过 this example，它看起来很漂亮，但无法将其集成到我的系统中。

Answer 1

您的意思是您需要通过拖动对象的顶点（这里是一条线）来编辑对象的几何形状。

对象的顶点不能自己拖动，所以你需要遍历几何体并在每个顶点位置创建小球体；
您设置一个光线投射器来拾取这些球体，如示例中所示；
您的屏幕是 2D 的，因此要以 3D 方式拖动对象，您需要一个与屏幕垂直的表面，该表面与球体位置相交。为此，您在顶点位置设置了一个不可见的平面，并让它看着相机；
一旦你可以正确地拖动球体，你就告诉对象上的相应顶点（你的线）它们必须与它们的球体保持相同的位置；
以geometry.verticesNeedUpdate=true结尾。

你有了新的几何图形

有关拾取对象的代码详情请查看官方拾取对象的示例draggable cubes
This example 展示了如何使用它来编辑对象

如果您需要更多解释，请发表评论

创建可以从末端修改的线

Creating lines that can be modified from ends

three.js