如何使用three.js链接两个几何对象

How to chain two geometric objects using three.js

本文关键字：两个 何对象 对象 three 何使用 js 链接      更新时间：2023-09-26

我们如何使用一条线连接两个规范？我希望它能像用绳子或弹性物体连接的球一样有人能指出一些样品吗？

在两点之间绘制箭头很简单：

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);

我所指的需要一个物理引擎。

示例可在此处找到http://schteppe.github.io/cannon.js/

如果您想为两个对象之间的线提供"弹性感觉"，可以使用BezierCurve。CCD_ 2中包含了几种不同的类型。例如，请查看此链接以获取更多信息。

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

BufferGeometry 的红色直线示例

Threejsr125更新后，请参阅的详细信息

let geometry = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(-5, 5, 0),
  new THREE.Vector3(5, 5, 0)
])
let line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xff0000 }))
scene.add(line)
相关文章：