three.js MapControls 设置平行相机的缩放等级
three.js MapControls 设置平行相机的缩放等级
这次项目使用了three.js来绘制立体地图，需要在使用平行相机的情况下，通过MapControls响应用户触发事件，从而改变地图的显示场景。
一、项目环境
- Vue.js 2
- three
v0.118.3 - IntelliJ IDEA
二、项目遇到的问题
在项目中需要对地图显示的初始缩放大小进行设置。
举个例子，我现在的地图有一个指定大小的边框，由于设置了相机是从地图正上方往下看，所以屏幕显示的应该是一个地图的边框正投影。我现在期望这个边框在屏幕上显示的大小是可以被指定的。
三、解决方案 2021.2.21
-
适用条件
我使用的相机是平行相机，是通过设置zoom的，如果是透视相机需要设置distance。不同点在于透视相机距离越近 (distance的值越小) 物体越大，平行相机缩放大小越大 (zoom的值越大) 物体越大。 -
思路
通过MapControls的reset方法可以让控制器设置当前的缩放大小为最大缩放。了解这个以后，我们通过设置MapControls对象的最大缩放，再调用reset方法，即可实现缩放大小的初始化，否则MapControls对象的缩放仍会为默认的缩放大小。 -
代码实现
// 初始化一个地图控制器 // 使用项目中已经做好初始化的平行相机和目标渲染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;
四、总结
- MapControls用于平行相机，缩放时改变的是相机的zoom的值
- MapControls用于透视相机，缩放时改变的是相机的position的值
这不太算一个比较好的方案，但是能解决类似的问题。如果有更好的方案，欢迎留言。