Как связать два геометрических объекта, используя three.js

Question

Как мы можем связать две формы, используя линию? Я бы хотел, чтобы это было похоже на шары, связанные с веревкой или что-то эластичное. Может ли кто-нибудь указать на некоторые образцы?

Answer 1

Чтобы нарисовать стрелку между двумя точками проста:

var startPoint = new THREE.Vector3(10,20,30); 
var endPoint = new THREE.Vector3(70,80,90); 
var direction = new THREE.Vector3().subVectors(endPoint, startPoint).normalize(); 
var arrow = new THREE.ArrowHelper(direction, startPoint, startPoint.distanceTo(endPoint), 0xCC0000); 
scene.add(arrow); 

Чтобы нарисовать просто строка немного сложнее:

var lineGeometry = new THREE.Geometry(); 
lineGeometry.vertices.push(new THREE.Vector3(10,20,30), new THREE.Vector3(70,80,90)); 
lineGeometry.computeLineDistances(); 
var lineMaterial = new THREE.LineBasicMaterial({ color: 0xCC0000 }); 
var line = new THREE.Line(lineGeometry, lineMaterial); 
scene.add(line); 

Answer 2

То, что я имел в виду, требует физический движок.

Примеры можно найти здесь http://schteppe.github.io/cannon.js/

Answer 3

Если вы хотите, чтобы дать «упругое чувство» для линии между двумя объектами, вы могли бы использовать BezierCurve. Есть несколько различных типов из них, включенных в Three.js. Например, посмотрите на this link для получения дополнительной информации.

Я не совсем понял, что вы имели в виду в своем собственном ответе, в отношении физических движков, но если бы вы намеревались производить горизонтальную веревочную линию, вам лучше использовать несколько подключенных и активирующих физический движок , например cannon.js. Я думаю, вам лучше использовать THREEx.cannon.js для легкой интеграции между ними.