THREE.js相机遵循特定路径

THREE.js camera following a specific path

本文关键字:路径 js 相机 THREE      更新时间:2023-09-26

我正在尝试使用THREE.js制作一款游戏。我有一条有很多曲线和一些直线的路径。

我在网上找到了一个例子,并试图实现TrackballControls.js,使相机遵循一条线,但相机不看在前面,它移动奇怪。

代码如下:

var controls = new THREE.TrackballControls(camera, render.domElement);
var numPoints = 50;
spline = new THREE.CatmullRomCurve3([
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(50, 0, 0),
    new THREE.Vector3(0, 0, -100)
]);
var material = new THREE.LineBasicMaterial({
    color: 0xff00f0,
});
var geometry = new THREE.Geometry();
var splinePoints = spline.getPoints(numPoints);
for (var i = 0; i < splinePoints.length; i++) {
    geometry.vertices.push(splinePoints[i]);
}
line = new THREE.Line(geometry, material);
line.position.set(0, 0, 0);
scene.add(line);
var counter = 0;
if (counter <= 1) {
    camera.position.copy( spline.getPointAt(counter) );
    tangent = spline.getTangentAt(counter).normalize();
    axis.crossVectors(up, tangent).normalize();
    var radians = Math.acos(up.dot(tangent));
    camera.quaternion.setFromAxisAngle(axis, radians);
    counter += 0.005
} else {
    counter = 0;
}

谢谢。

下面的例子展示了如何创建一个遵循样条曲线的相机。只需点击"相机样条动画视图"按钮即可查看效果。也许你可以使用底层代码来解决你的问题。