如何在三个.js中设置相机坐标对象?使用示例" webgl obj + mtl loader"

时间:2017-04-17 20:57:24

标签: three.js wavefront

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

我跟随Three.js中关于如何在webgl上加载带有mtl的obj的示例。我使用原始的HTML,除了我只是将CerroPelaoLow替换为boy02列出的obj,文件放在obj目录中。 Firefox正确显示模型,但位置是问题。

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

那么如何使用我的物体的局部坐标或聚焦相机然后使用一组不同的控件呢?

1 个答案:

答案 0 :(得分:0)

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

// 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 );