用三维“绳子”连接两个运动物体的three.js

Question

我试图创建一个工业机器人模型与移动部分(运动控制的dat.gui面板)。

模型截图

问题:我不知道如何使绳子部分(在图像中的3号)，以调整它的长度时，‘钩子’部分(2号)是上下移动。绳子应始终与挂钩和底座(1号)保持连接。

我最初尝试使用管状几何学，但不知道如何正确地操纵它以获得所需的结果。

您可以在这里找到源代码：https://gitlab.com/enrika/three.js-studies/blob/cfabd98a08b84566a6de2839328d3bd7c95442a8/robot

也许有一种特定的形状会更容易使用？如有任何反馈和建议，我们将不胜感激！

Answer 1

如果我没猜错，那么你可以用绳子的网目进行缩放：

​

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(5, 10, 10);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var base = new THREE.Mesh(new THREE.BoxGeometry(3, 1, 3), new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
base.position.setY(5);
scene.add(base);

var hook = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({
  color: "green",
  wireframe: true
}));
hook.position.set(0, -5, 0);
base.add(hook);

var rope = new THREE.Mesh(new THREE.BoxGeometry(0.1, 1, 0.1), new THREE.MeshBasicMaterial({
  color: "blue"
}));
rope.geometry.translate(0, -0.5, 0);
rope.scale.y = Math.abs(hook.position.y);
base.add(rope);

var gui = new dat.GUI();
gui.add(hook.position, "y", -5, -1).onChange(v => {
  rope.scale.y = Math.abs(v) // scale the rope along Y-axis
});

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.min.js"></script>

​