源码：
前言
我们之前在建立相机轨道控制器的时候，滑动鼠标滚轮，相机会基于画布的中心点缩放视图。
后来有同学问我如何基于鼠标所在的位置缩放视图，我觉得这个功能可以有，所以就在此做个补充。
1-原理解析
基于鼠标所在的位置缩放视图时，缩放值正常写即可，但相机的位置会发生偏移。
效果如下：
因为相机会通过其位置的变化，确保鼠标所在的那个点不会在视口中发生位移，所以相机的位置就是此功能的关键点。
当我说相机的位置的时候，有基本功的同学就必然会想到坐标系。
咱们把坐标系的运算顺序再回顾一下：
canvas画布的像素坐标系 > 裁剪矩阵 > 相机视图矩阵 > 相机投影矩阵 > 模型矩阵
相机投影矩阵控制的是相机的缩放，当然这只是对于我们当前的二维相机而言的。
相机视图矩阵控制的是相机的位移和旋转，我们当前的二维相机里只有缩放，没有旋转。
我们刚才所说的相机位置对应的坐标系就是相机的视图矩阵。
接下来咱们解一个题，谋定而后动很适合如我这般不比学霸的人。
已知：
- 鼠标在canvas画布上的像素位是点origin。
- 相机的位置是camPos。
求：相机基于鼠标位置缩放s 后的相机位置。
解：
在解题时，首先要统一坐标系。
1.把鼠标点统一到相机位置所在的坐标系中，设此点为P1：
P1 = 裁剪矩阵 * origin + camPos
2.计算P1在基于默认的零点缩放s 后的位置，设此点为P2：
P2=P1*1/s
上面的1/s 是因为相机的缩放量与模型是反着的。
3.将相机的当前位置加上P2到P1的差值，便可确保鼠标所在的点位不动，周围的点位发生缩放。
camPos+=P2-P1
思路已经清晰，接下来写代码就简单了。
2-代码
2-1-OrbitControler.ts
找到/src/lmm/controler/OrbitControler.ts 中的doScale() 方法。
之前我们是基于画布中心缩放视图的：
doScale(deltaY: number) {
const { enableZoom, camera, zoomSpeed } = this
if (!enableZoom) {
return
}
const scale = Math.pow(0.95, zoomSpeed)
if (deltaY > 0) {
camera.zoom /= scale
} else {
camera.zoom *= scale
}
this.dispatchEvent(_changeEvent)
}
接下来我们对此方法做下扩展，使其可以基于裁剪坐标系里的某个点位进行缩放。
doScale(deltaY: number,origin?:Vector2) {
const { enableZoom, camera, zoomSpeed } = this
if (!enableZoom) {
return
}
let scale = Math.pow(0.95, zoomSpeed)
if (deltaY > 0) {
scale=1/scale
}
camera.zoom *= scale
if(origin){
const P1=new Vector2().addVectors(origin,camera.position)
const P2=P1.clone().multiplyScalar(1/scale)
camera.position.add(P2.sub(P1))
}
this.dispatchEvent(_changeEvent)
}
doScale() 方法中的origin 参数就是裁剪坐标系里的某个点位，默认不写，就会基于画布中心缩放视图。
若origin 存在，那我们就计算出基点在视图矩阵中的点位P1，以及缩放后的点位P2，然后以两点之差偏移相机。
2-2-测试
找到之前/src/examples/OrbitControler.vue 中的鼠标滚轮事件，在其中的缩放方法中传入鼠标的裁剪坐标。
/* 滑动滚轮缩放 */
function wheel({ deltaY,clientX,clientY }: WheelEvent){
// 基于画布中心缩放视口
// orbitControler.doScale(deltaY)
// 基于鼠标位置缩放口
orbitControler.doScale(deltaY,scene.canvastoClip(new Vector2(clientX,clientY)))
}
scene.canvastoClip() 方法可以将鼠标的像素坐标位转裁剪坐标位。
效果如下：
总结
这个功能的关键还是大家对于矩阵关系的理解。
若你对其一知半解，那你就需要掌握解题的思路和步骤，一步步推导。
