左右设置摄像机

Question

我有一个跑步者的three.js动画。我已经将其嵌入到我网站上的iFrame中，但是角色从屏幕上消失了。

我对定位和摄像头角度非常满意，我只需要向右移动它，以便角色在iFrame中居中。

下面是我正在使用的代码。

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 4000);
camera.position.set(0, 150, 50);
camera.position.z = cz;
camera.zoom = 3.5;
camera.updateProjectionMatrix();
scene.add(camera);

Answer 1

您可以使用camera.lookAt() method，它将相机对准所需的位置。

// You could set a constant vector
var targetPos = new THREE.Vector3(50, 25, 0);
camera.lookAt(targetPos);

// You could also do it in the animation loop
// if the position will change on each frame
update() {
   person.position.x += 0.5;
   camera.lookAt(person.position);
   renderer.render(scene, camera);
}

Answer 2

我觉得lookAt（）方法不起作用。它只会旋转相机，并且您指定了自己喜欢的相机位置/角度。

如果要在建模时将摄像机向右移动，则每帧将摄像机的position.x设置为等于model.x（假设左/右仍为X轴）。

person.position.x += 0.5; camera.position.x = person.position.x;

或者，您可以使物体和相机保持静止并移动地平面。甚至有一个旋转的圆柱体，其侧面的半径足够大。