ThreeJS。如何实现Zoomall并确保给定的框填充画布区域? [英] ThreeJS. How to implement ZoomALL and make sure a given box fills the canvas area?
本文介绍了ThreeJS。如何实现Zoomall并确保给定的框填充画布区域?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找一个函数,以确保给定的框或球体将在WebGL画布中可见,并且它将适合画布区域。
我使用透视摄像机,摄像机已经指向对象的中间。
我理解这可以通过改变FOV角度或通过沿着视图轴移动相机来实现。
I am looking for a function to ensure that a given box or sphere will be visible in a WebGL canvas, and that it will fit the canvas area. I am using a perspective camera and the camera already points to the middle of the object. I understand that this could be achieved by changing the FOV angle or by moving the camera along the view axis.
任何想法如何使用ThreeJS可以实现这一点。
Any idea how this could be achieved with ThreeJS ?
推荐答案
这是我最终实现它:
var camera = new THREE.PerspectiveCamera(35,1,1, 100000);
var controls = new THREE.TrackballControls( me.camera , container);
[...]
/**
* point the current camera to the center
* of the graphical object (zoom factor is not affected)
*
* the camera is moved in its x,z plane so that the orientation
* is not affected either
*/
function pointCameraTo (node) {
var me = this;
// Refocus camera to the center of the new object
var COG = shapeCenterOfGravity(node);
var v = new THREE.Vector3();
v.subVectors(COG,me.controls.target);
camera.position.addVectors(camera.position,v);
// retrieve camera orientation and pass it to trackball
camera.lookAt(COG);
controls.target.set( COG.x,COG.y,COG.z );
};
/**
* Zoom to object
*/
function zoomObject (node) {
var me = this;
var bbox = boundingBox(node);
if (bbox.empty()) {
return;
}
var COG = bbox.center();
pointCameraTo(node);
var sphereSize = bbox.size().length() * 0.5;
var distToCenter = sphereSize/Math.sin( Math.PI / 180.0 * me.camera.fov * 0.5);
// move the camera backward
var target = controls.target;
var vec = new THREE.Vector3();
vec.subVectors( camera.position, target );
vec.setLength( distToCenter );
camera.position.addVectors( vec , target );
camera.updateProjectionMatrix();
render3D();
};
这样的例子可以在 https://github.com/erossignon/node-occ/blob/master/sample/client/GeomView.js
这篇关于ThreeJS。如何实现Zoomall并确保给定的框填充画布区域?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文