Three.js - 打开 PerspectiveCamera 显示边界球体 [英] Three.js - Open PerspectiveCamera showing bounding Sphere

问题描述

我有一个加载一个 .obj 文件的场景.

I have a Scene which loads one .obj file.

使用 PerspectiveCamera 我不想开始场景时对象在相机中完全可见.

Using the PerspectiveCamera I wan't to start the scene with the object fully visible in the camera.

• FOV 固定为 60
• 对象具有可变大小
• TrackballControls 用于控制相机

• FOV is fixed in 60
• Objects have variable size
• TrackballControls is used to control the camera

我尝试了这个解决方案但没有奏效.

代码:

FOV = 60

scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera( FOV, 500 / 350, 0.1, 10000 )
scene.add( camera )

objLoader = new THREE.OBJLoader();
objLoader.load('/airboat.obj', function (object) {
  scene.add( object )

  var boundingBox = new THREE.Box3();
  boundingBox.setFromObject( object );
  var sphere = boundingBox.getBoundingSphere()

  // don't work
  var center = boundingBox.getCenter();
  var size = boundingBox.getSize();
  var maxDim = Math.max( size.x, size.y, size.z );
  var cameraZ = maxDim / 2 / Math.tan(Math.PI * FOV / 360);
  camera.lookAt(center)
  camera.position.set( center.x, center.y, cameraZ );
  camera.updateProjectionMatrix();
})

编辑

我创建了这个小提琴(向下滚动JS代码)并且@Brakebein解决方案有效大多数时候，但有时边界框边缘不可见

I created this fiddle (scroll down the JS code) and @Brakebein solution works most of the times, but sometimes the bounding box edges are not visible

推荐答案

您可以尝试在设置相机位置后调用 camera.lookAt(center):

You could try to call camera.lookAt(center) after you set the camera's position:

camera.position.set( center.x, center.y, cameraZ );
camera.lookAt(center);

或者您可以尝试使用 BoundingSphere 的方法，因为我在我的项目中使用它来将对象放入视图中:(我使用的是 OrbitControls，但它应该与 一样工作轨迹球控制)

Or you could try the approach using the BoundingSphere as I use it in my project to fit objects into the view: (I'm using OrbitControls, but it should work the same with TrackballControls)

var sphere = boundingBox.getBoundingSphere();

// compute new distance between camera and center of object/sphere
var h = sphere.radius / Math.tan( camera.fov / 2 * THREE.Math.DEG2RAD );

// get direction of camera (when using Orbit or TrackballControls, the camera is
// always pointing  to the control's target, so I'm using this)
var dir = new THREE.Vector3().subVectors(camera.position, controls.target);

// compute new camera position
var newPos = new THREE.Vector3().addVectors(sphere.center, dir.setLength(h));

// copy values
camera.position.copy(newPos);
controls.target.copy(sphere.center);

camera.lookAt(controls.target); // -> you don't need to call this as this is already part of controls.update() routine

提示: 确保相机和控件不在同一位置.否则，将无法计算方向.

Hint: Make sure that camera and controls are not at the same position. Otherwise, it won't work to compute the direction.

好的，我从@Rabbid76 的图表中得到了提示:我的解决方案基本上与第一个一致.在某些情况下，对象或边界框的一部分将在视锥体之外.所以第二张图所示的方法更好.为此，我们只需要将 tan 更改为 sin:

Ok, I got the hint from @Rabbid76's diagrams: My solution is basically accordant to the first one. In certain situations, parts of the object or bounding box will be outside of the viewing frustum. So the method shown in the second diagram is better. To do so, we just need to change tan to sin:

var h = sphere.radius / Math.sin( camera.fov / 2 * THREE.Math.DEG2RAD );

这篇关于Three.js - 打开 PerspectiveCamera 显示边界球体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！