调整相机以获得可见的Three.js形状

sn6*_*6uv 6 javascript three.js

我有一个相机正在观看的CubeGeometry,我希望相机可以放大,这样立方体就完全可见,但不会更大.

我最初的尝试是将立方体顶点转换为摄像机坐标系,

function toScreenXY(position, camera) {
  var pos = position.clone();
  var projScreenMat = new THREE.Matrix4();
  projScreenMat.multiply(camera.projectionMatrix, camera.matrixWorldInverse);
  projScreenMat.multiplyVector3( pos );

  return pos;
}
function ScaleInView() {
  camera.fov = 0.0;
  for (var i=0; i<8; i++) {
    proj2d = toScreenXY(cube.geometry.vertices[i],camera);
    angle = 57.296 * Math.max(Math.atan(proj2d.x/proj2d.z), Math.atan(proj2d.y/proj2d.z));
    camera.fov = Math.max(camera.fov,angle);
  }
  camera.updateProjectionMatrix();
}
Run Code Online (Sandbox Code Playgroud)

我认为这会起作用,但有时它太小了,有时候太大(取决于相机的位置).

我还需要为正射相机做这个.

编辑: 当立方体面向相机时,我知道如何做到这一点,当相机移动到某个任意(r,theta,phi)位置时,我正在寻找一种方法(球面极坐标; r实际上是为我的目的不变).

sn6*_*6uv 3

乘以camera.matrixWorldInverse 给出相机坐标中的向量,但重要的是不应用透视。

function toCameraCoords(position) {
  return camera.matrixWorldInverse.multiplyVector3(position.clone());
}
Run Code Online (Sandbox Code Playgroud)

然后我们可以找到适合场景中所有盒子角的最小角度。arctan(Dx / Dz) 给出角度 BCD,其中 B 是相机正在观察的物体,C 是相机的位置,D 是您希望在相机坐标中可见的对象的位置。

就我而言,以下内容可确保立方体边界框完全可见。

function ScaleInView() {
  var tmp_fov = 0.0;

  for (var i=0; i<8; i++) {
    proj2d = toCameraCoords(boundbox.geometry.vertices[i]);

    angle = 114.59 * Math.max( // 2 * (Pi / 180)
      Math.abs(Math.atan(proj2d.x/proj2d.z) / camera.aspect),
      Math.abs(Math.atan(proj2d.y/proj2d.z))
    );
    tmp_fov = Math.max(tmp_fov, angle);
 }

 camera.fov = tmp_fov + 5; // An extra 5 degrees keeps all lines visible
 camera.updateProjectionMatrix();
}
Run Code Online (Sandbox Code Playgroud)