Question

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

问题：我无法弄清楚如何制作“钩”部分（2号）上下移动时会调节其长度的绳索部分（图像中的3号）。绳索应始终保持与钩子和底座（编号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'绳'连接两个运动对象

1 个答案: