THREE.js 특정 경로를 따르는 카메라

Question

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

감사 : 여기

는 코드입니다.

Answer 1

다음은 example으로 스플라인 곡선을 따르는 카메라를 만드는 방법을 보여줍니다. "Camera Spline Animation View"버튼을 클릭하면 효과를 볼 수 있습니다. 어쩌면 기본 코드를 사용하여 문제를 해결할 수 있습니다.