使用轨迹球控件手动设置相机位置和 fov (THREEJS)

Question

我在 THREE.JS 中手动设置了 perspective camera 的 position 和 fov。它的行为符合预期。但是，稍后我尝试通过 TrackBall Controls 与 scene 进行交互时，它只是显示黑屏，没有错误。

JS Fiddle

相关代码：

var bbox = new THREE.Box3().setFromObject(scene);
var center = bbox.getCenter();
var size = bbox.getSize();

// update some controls properties
controls.target.set(center.x, center.y, center.z);

// position the camera  on the y axis
camera.position.set(center.x, center.y - size.y, center.z);

// fit FOV
var dist = size.y / 2;
var fov = 2 * Math.atan( size.z / ( 2 * dist ) ) * ( 180 / Math.PI );

camera.fov = fov;

camera.updateProjectionMatrix();

为了能够与 scene

正确交互，我缺少哪一步

谢谢

==== 编辑

工作 fiddle 基于已接受的答案：Fiddle

Answer 1

我认为当相机 "up" 位置平行于相机位置和目标定义的矢量时，无法正确投影案例。相机向上位置应指定如何在垂直于从相机位置到目标的矢量的平面中定向视图，但如果 camera.up 沿该平面的分量为零，则它无法工作。在您的代码中：

相机"up"位置是默认的(0,1,0)
从相机位置到相机目标的向量是(0,size.y,0)

最简单的解决方法可能是指定不同的相机 "up"，即

camera.up = new THREE.Vector3(0,0,1.);

或任何其他不平行于 y 方向的矢量。

使用轨迹球控件手动设置相机位置和 fov (THREEJS)

Setting camera position and fov manually with trackball controls (THREEJS)

javascript

three.js

controls

perspectivecamera

trackball