three.js 用 3d 连接两个移动物体 'rope'

Question

我正在尝试创建一个带有运动部件的工业机器人模型（运动由 dat.gui 面板控制）。

screenshot of the model

问题：我不知道如何制作绳子部分（图中的 3 号），当 'hook' 部分（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>

three.js 用 3d 连接两个移动物体 'rope'

three.js connecting two moving objects with 3d 'rope'

javascript

graphics

3d-modelling

three.js

dat.gui