遵循特定路徑的THREE.js攝像頭

Question

我正在嘗試使用THREE.js制作游戲。 我有一條包含很多曲線和一些直線路徑的路徑。

我在Internet上找到了一個示例，並嘗試實現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;
}

謝謝。

Answer 1

以下示例顯示了如何創建遵循樣條曲線的相機。 只需單擊“ Camera Spline Animation View”按鈕即可查看效果。 也許您可以使用基礎代碼來解決您的問題。