关于编辑器:ThreeJS教程地图案例包围盒正投影

举荐：将 NSDT 场景编辑器退出你的 3D 工具链
3D 工具集：NSDT 简石数字孪生地图案例
(突围盒、正投影) 地图案例 (突围盒、正投影) 地图案例会波及到几何体、突围盒、正投影相机三方面知识点。

https://www.mvrlink.com/threejs-map-cases/

立体填充几何体 ShapeGeometry 突围盒 Box3 正投影相机 OrthographicCameraShapeGeometry 渲染河南省地图轮廓

const data = [// 河南边界轮廓边界经纬度坐标
[110.3906, 34.585],
[110.8301, 34.6289],
…
…
[111.7969, 35.0684]
]
const pointsArr = [];// 一组二维向量示意一个多边形轮廓坐标
data.forEach(function(e){

// data 坐标数据转化为 Vector2 形成的顶点数组
const v2 = new THREE.Vector2(e[0],e[1])
pointsArr.push(v2);

})
// Shape 示意一个立体多边形轮廓, 参数是二维向量形成的数组 pointsArr
const shape = new THREE.Shape(pointsArr);
// 多边形 shape 轮廓作为 ShapeGeometry 参数，生成一个多边形平面几何体
const geometry = new THREE.ShapeGeometry(shape);
抉择相机地图案例能够不应用透视投影相机模仿人眼的透视察看成果，抉择正投影相机即可。// 正投影相机
const width = window.innerWidth; //canvas 画布宽度
const height = window.innerHeight; //canvas 画布高度
const k = width / height; //canvas 画布宽高比
const s = 50; // 管制 left, right, top, bottom 范畴大小
const camera = new THREE.OrthographicCamera(-s k, s k, s, -s, 1, 8000);
camera.position.set(300, 300, 300);
camera.lookAt(0, 0, 0); // 指向坐标原点
应用下面相机参数，默认状况下，你运行案例源码，能够看到河南地图并没有居中显示，在 canvas 画布上显示的成果也比拟小。如果你想地图全屏最大化居中显示，能够通过突围盒来辅助设置计算参数。突围盒 Box3 计算模型的核心地位和尺寸突围盒 Box3 计算模型的核心地位和尺寸。// 突围盒计算模型对象的大小和地位
const box3 = new THREE.Box3();
box3.expandByObject(mesh); // 计算模型突围盒
const size = new THREE.Vector3();
box3.getSize(size); // 计算突围盒尺寸
// console.log(‘ 模型突围盒尺寸 ’,size);
const center = new THREE.Vector3();
box3.getCenter(center); // 计算突围盒核心坐标
// console.log(‘ 模型核心坐标 ’,center);
地图居中显示设置相机.lookAt()参数指向突围盒几何核心即可。const x = 113.51,y = 33.88;
camera.lookAt(x, y, 0);
留神如果应用了 OrbitControls，须要设置.target 和.lookAt()参数是雷同坐标。const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(x, y, 0); // 与 lookAt 参数保持一致
controls.update();//update() 函数内会执行 camera.lookAt(controls.target)
地图根本填充 cnavas 画布地图显示成果更大，尽量使地图根本填充整个 canvas 画布。把正投影相机管制上下左右的变量 s，设置为地图模型整体尺寸的一半左右即可。// const s = 50; // 管制 left, right, top, bottom 范畴大小
const s = 2.5;// 依据突围盒大小调整 s，突围盒 y 方向尺寸的一半左右
const camera = new THREE.OrthographicCamera(-s k, s k, s, -s, 1, 8000);
地图平行于 canvas 画布把相机的地位和察看指标的 xy 坐标设置为一样，这样相机的眼帘方向就垂直地图立体，这样地图就平行于 canvas 画布，或者说平行于显示器屏幕。const x = 113.51,y = 33.88;
// 与观察点 x、y 一样，地图平行与 canvas 画布
camera.position.set(x, y, 300);
camera.lookAt(x, y, 0);