three.js, соединяющий два движущихся объекта с помощью трехмерной «веревки» - PullRequest
Новая
       25

three.js, соединяющий два движущихся объекта с помощью трехмерной «веревки»

0 голосов
/ 11 ноября 2018

Я пытаюсь создать модель промышленного робота с движущимися частями (управление движением осуществляется с помощью панели dat.gui).

скриншот модели

Проблема: я не могу понять, как сделать деталь каната (номер 3 на рисунке), которая бы регулировала его длину при перемещении части «крюк» (номер 2) вверх и вниз. Веревка должна всегда оставаться подключенной к крюку и основанию (номер 1).

Сначала я пытался использовать геометрию трубки, но не мог понять, как правильно манипулировать ею, чтобы получить желаемый результат.

Вы можете найти исходный код здесь: https://gitlab.com/enrika/three.js-studies/blob/cfabd98a08b84566a6de2839328d3bd7c95442a8/robot

Возможно, есть конкретная форма, с которой было бы легче работать? Любые отзывы и советы приветствуются!

1 Ответ

0 голосов
/ 11 ноября 2018

Если я вас правильно понял, вы можете использовать масштабирование сетки веревки: 

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>
...