Three.js 模型几何体自动全屏

Question

通过 Threejs 加载一个三维模型或者开发一个三维建模软件，预览三维模型的可能需要全屏查看三维模型，比如加载一个模型如果模型尺寸太小或者相机参数设置不合适，可能会看不到，这时候可以设置相机参数或者缩放模型对象实现全屏预览查看三维模型几何体。

下面代码是对一个有多个网格模型后代的层级模型对象obj进行全屏设置。

先计算层级模型对象的包围盒尺寸，然后根据包围盒尺寸，参考相机参数，选择一个合适缩放参数，对三维模型进行缩放操作。

实现全屏也不一定缩放三维模型，你可以通过包围盒相关的计算，去修改相机的参数也可以。只要掌握了threejs包围盒的相关知识，怎么去灵活计算自然就变得很容易，关于 threejs 包围盒的知识，可以参考本站文章 Three.js 包围盒 Box3

/**
 * 包围盒全自动计算：模型整体居中、模型全屏显示
 */
var box3 = new THREE.Box3()
box3.expandByObject(obj) // 计算层级模型包围盒
var v3 = new THREE.Vector3()
// 获得包围盒长宽高尺寸，结果保存在参数三维向量对象v3中
box3.getSize(v3)
// 计算包围盒的最大边长
function num() {
  var max;
  if (v3.x > v3.y) {
    max = v3.x
  } else {
    max = v3.y
  }
  if (max > v3.z) {} else {
    max = v3.z
  }
  return max;
}
// 根据最大边长设置缩放倍数，尽量全屏显示
// 150：参照相机正投影相机参数left、right、top和bottom设置一个合适的值
// 过大会超出屏幕范围，过小全屏效果不明显
var S = 150 / num();
// 对模型进行缩放操作，实现全屏效果
obj.scale.set(S, S, S);
// 重新计算包围盒，重新计算包围盒，不能使用原来的包围盒必须重新声明一个包围盒
var newBox3 = new THREE.Box3()
newBox3.expandByObject(obj)
var center = new THREE.Vector3() // 计算一个层级模型对应包围盒的几何体中心
newBox3.getCenter(center)
// 重新设置模型的位置，使模型居中
obj.position.x = obj.position.x - center.x
obj.position.y = obj.position.y - center.y
obj.position.z = obj.position.z - center.z

上面代码对应的相机参数设置

/**
 * 相机设置
 */
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 100; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

恢复全屏

使用正投影相机对象的时候，如果通过相机控件OrbitControls控制相机缩放三维场景，如果想恢复模型全屏预览状态，只需要把相机对象.zoom属性恢复初始值就可以。

使用OrbitControls控件，滚动鼠标中键可以缩放三维场景，本质上改变是正投影相机对象的.zoom属性

// 对于正投影相机，鼠标中键滚动的时候，鼠标中键会改变相机的zoom属性
camera.zoom = 1
camera.updateProjectionMatrix(); //注意更新相机对象的投影矩阵