javascript - 如何使用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。例如，查看此链接以获取更多信息。

关于物理引擎，我不太明白您在自己的答案中的意思，但是如果您打算制作像线一样的水平绳索，则最好使用几个THREE.Line连接并激活物理引擎，例如cannon.js. 我认为您最好使用THREEx.cannon.js以便在两者之间轻松集成。