three.js MapControls 设置平行相机的缩放等级

• three.js MapControls 设置平行相机的缩放等级

three.js MapControls 设置平行相机的缩放等级

这次项目使用了three.js来绘制立体地图，需要在使用平行相机的情况下，通过MapControls响应用户触发事件，从而改变地图的显示场景。

一、项目环境

• Vue.js 2
• three v0.118.3
• IntelliJ IDEA

二、项目遇到的问题

在项目中需要对地图显示的初始缩放大小进行设置。
举个例子，我现在的地图有一个指定大小的边框，由于设置了相机是从地图正上方往下看，所以屏幕显示的应该是一个地图的边框正投影。我现在期望这个边框在屏幕上显示的大小是可以被指定的。

三、解决方案 2021.2.21

1. 适用条件
   我使用的相机是平行相机，是通过设置zoom的，如果是透视相机需要设置distance。不同点在于透视相机距离越近 (distance的值越小) 物体越大，平行相机缩放大小越大 (zoom的值越大) 物体越大。

2. 思路
   通过MapControls的reset方法可以让控制器设置当前的缩放大小为最大缩放。了解这个以后，我们通过设置MapControls对象的最大缩放，再调用reset方法，即可实现缩放大小的初始化，否则MapControls对象的缩放仍会为默认的缩放大小。

3. 代码实现

   // 初始化一个地图控制器
   // 使用项目中已经做好初始化的平行相机和目标渲染dom对象
   this.controls = new MapControls(this.ortCamera, this.renderer.domElement);
   // 设置控制器的最大缩放
   // 这里设置了缩放大小为 0.1
   // 缩放大小需要根据相机的位置以及个人需求来定
   this.controls.maxZoom = 0.1;
   // 调用控制器重置方法
   this.controls.reset();
   // 不必须的一句代码
   // 这里设置的原因是我希望控制器的最大缩放是 0.2
   // 0.1 是我希望控制器初始显示的缩放大小
   this.controls.maxZoom = 0.2;
   

四、总结

1. MapControls用于平行相机，缩放时改变的是相机的zoom的值
2. MapControls用于透视相机，缩放时改变的是相机的position的值

这不太算一个比较好的方案，但是能解决类似的问题。如果有更好的方案，欢迎留言。