如何在three.js中将相机坐标设置为对象？使用示例“webgl obj + mtl loader”

【问题标题】：How to set camera coordinates to object in three.js? Using example "webgl obj + mtl loader"如何在three.js中将相机坐标设置为对象？使用示例“webgl obj + mtl loader”
【发布时间】：2017-09-13 13:00:54
【问题描述】：

我有一个 .obj 格式的 3D model。但是，此 3D 模型的坐标不是 (0,0,0)。这是无人机图像的 3D 渲染，因此坐标是实际的地理参考坐标。

我正在关注 Three.js 中关于如何在 webgl 上加载带有 mtl 的 obj 的示例。我使用原始的HTML，只是我简单地将列为male02 的obj 替换为CerroPelaoLow 并将文件放在obj 目录中。 Firefox 正确显示模型，但位置是问题。

请注意，此渲染是由程序以这种方式生成的，即使我可以使用诸如 Meshlab 之类的程序来操作模型，我仍然希望尽可能减少操作。

那么我如何使用对象的本地坐标或对焦相机然后使用一组不同的控件？

【问题讨论】：

标签： three.js wavefront

【解决方案1】：

您可以使用对象几何的boundingSphere 或boundingBox 来确定相机的位置和位置。我已经实现了一个功能来聚焦一个对象或一组对象。所以，在这里我分享一些代码：

// assuming following variables:
// object   -> your obj model (THREE.Mesh)
// camera   -> PerspectiveCamera
// controls -> I'm also using OrbitControls


// if boundingSphere isn't set yet
object.computeBoundingSphere();

var sphere = object.geometry.boundingSphere.clone();
sphere.applyMatrix4( object.matrixWorld );

// vector from current center to camera position (shouldn't be zero in length)
var s = new THREE.Vector3().subVectors( camera.position, controls.center );

var h = sphere.radius / Math.tan( camera.fov / 2 * Math.PI / 180 );

var newPos = new THREE.Vector3().addVectors( sphere.center, s.setLength(h) );

camera.position.copy( newPos );
controls.center.copy( sphere.center );

【讨论】：