10.相机基础

正投影相机

// 构造函数格式
OrthographicCamera( left, right, top, bottom, near, far )

left	渲染空间的左边界
right	渲染空间的右边界
top	渲染空间的上边界
bottom	渲染空间的下边界
near	near属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。默认值0.1
far	far属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到。默认值2000

正投影相机的长方体可视化空间和透视投影PerspectiveCamera视锥体相似，只是形状不同。正投影相机范围是一个矩形，透视投影相机范围是一个圆锥体

渲染范围设置

// 正投影相机
const width = window.innerWidth; //canvas画布宽度
const height = window.innerHeight; //canvas画布高度
const k = width / height; //canvas画布宽高比
const s = 600;//控制left, right, top, bottom范围大小
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);

正投影相机-canvas发生变化

一些应用场景Cnavas画布可能不是固定尺寸，而是变化的。这时候就需要重新设置WebGL渲染器、相机等参数。

相机参数更新

正投影相机OrthographicCamera的left、 right属性受到canvas画布宽高比影响，所以需要随着canvas画布更新。

window.onresize = function () {
    const width = window.innerWidth; //canvas画布宽度
    const height = window.innerHeight; //canvas画布高度
    // 1. WebGL渲染器渲染的Cnavas画布尺寸更新
    renderer.setSize(width, height);
    // 2.1.更新相机参数
    const k = width / height; //canvas画布宽高比
    camera.left = -s*k;
    camera.right = s*k;
    // 2.2.相机的left, right, top, bottom属性变化了，通知threejs系统
    camera.updateProjectionMatrix();
};

包围盒Box3

所谓包围盒Box3，就是一个长方体空间，把模型的所有顶点数据包围在一个最小的长方体空间中，这个最小长方体空间就是该模型的包围盒Box3。

计算模型最小包围盒.expandByObject()

const box3 = new THREE.Box3();
box3.expandByObject(mesh); // 计算模型包围盒
console.log('查看包围盒',box3);

包围盒尺寸.getSize()

const scale = new THREE.Vector3()
// getSize()计算包围盒尺寸
// 获得包围盒长宽高尺寸，结果保存在参数三维向量对象scale中
box3.getSize(scale)
console.log('模型包围盒尺寸', scale);

包围盒几何中心.getCenter()

// 计算包围盒中心坐标
const center = new THREE.Vector3()
box3.getCenter(center)
console.log('模型中心坐标', center);

OrbitControls旋转缩放限制

课程中经常会用到相机控件OrbitControls的不同功能,本节课就会大家补充新的知识点，比如控制缩放的最大最小范围，比如限制旋转的角度范围，比如禁止平移。

禁止右键平移.enablePan属性

比如一个展示一个三维场景，你不希望鼠标右键拖动会产生一个平移效果。可以通过设置相机空间对象OrbitControls的.enablePan属性，查看OrbitControls源码可以看到.enablePan属性的默认值是true。

controls.enablePan = false; //禁止右键拖拽

禁止缩放或旋转

通过.enableZoom属性可以控制是否允许鼠标中键缩放场景，.enableZoom属性默认值true。

controls.enableZoom = false;//禁止缩放

透视投影范围

在实际应用中，透视投影相机的规则是远小近大，相机距离目标观察点距离越远，目标模型显示越小，距离越近显示越大前面给大家讲解过，对于透视投影相机而言，OrbitControls缩放，本质上就是改变相机的位置属性.position。这就是说如果你想控制缩放范围，就是约束相机位置.position的变化范围，OrbitControls提供了两个属性.minDistance和.maxDistance可以帮助你实现。 .minDistance表示相机位置.position和相机目标观察点controls.target的最小距离。

//相机位置与观察目标点最小值
controls.minDistance = 200;

//相机位置与观察目标点最大值
controls.maxDistance = 500;

正投影缩放范围

对于正投影相机对象OrthographicCamera，可以通过相机控件OrbitControls的.minZoom和.maxZoom属性实现

// 缩放范围
controls.minZoom = 0.5;
controls.maxZoom = 2;

相机位置与目标观察点距离

.getDistance() controls.getDistance()可以计算出来相机位置.position和相机目标观察点controls.target的距离。

//相机位置与目标观察点距离
const dis = controls.getDistance();
console.log('dis',dis);

设置旋转范围

通过.minPolarAngle和.maxPolarAngle属性控制上下的旋转范围，默认从0到180度，默认情况下0度，XOZ平面平行canvas画布，y轴垂直指向屏幕外，90度时候，渲染结果y轴竖直向上，180度，XOZ平面平行canvas画布，y轴垂直指向屏幕内。

// 上下旋转范围
controls.minPolarAngle = 0;//默认值0
controls.maxPolarAngle = Math.PI;//默认值Math.PI

// 左右旋转范围
controls.minAzimuthAngle = -Math.PI/2;
controls.maxAzimuthAngle = Math.PI/2;