Map case (bounding box, orthographic projection)

The map case will involve knowledge points in three aspects: geometry, bounding box, and orthographic projection camera.

Planar filled geometryShapeGeometry
bounding boxBox3
orthographic projection cameraOrthographicCamera

`ShapeGeometry`Rendering Henan province map outline

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);

Select camera

The map case can not use the perspective projection camera to simulate the perspective observation effect of the human eye, just choose the orthographic projection camera .

// 正投影相机
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); //指向坐标原点

Using the above camera parameters, by default, if you run the case source code, you can see that the Henan map is not displayed in the center, and the display effect on the canvas is relatively small.

If you want the map to be maximized and centered in the full screen, you can use the bounding box to assist in setting calculation parameters.

The bounding box `Box3`calculates the center position and size of the model

The bounding box Box3calculates the center position and size of the model .

// 包围盒计算模型对象的大小和位置
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);

Center the map

Set the camera .lookAt()parameters to point to the geometric center of the bounding box.

const x = 113.51,y = 33.88;
camera.lookAt(x, y, 0);

Note that if it is used OrbitControls, it needs to be set to the same coordinates .targetas .lookAt()the parameter.

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(x, y, 0); //与lookAt参数保持一致
controls.update();//update()函数内会执行camera.lookAt(controls.target)

Map basically fills cnavas canvas

The map display effect is bigger, try to make the map basically fill the entire canvas.

Set the variable s that controls the up, down, left, and right of the orthographic camera to about half of the overall size of the map model.

// 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);

The map is parallel to the canvas

Set the camera's position to the same xy coordinate as the observation target, so that the camera's line of sight is perpendicular to the map plane, so that the map is parallel to the canvas, or parallel to the monitor screen.

const x = 113.51,y = 33.88;
//与观察点x、y一样，地图平行与canvas画布
camera.position.set(x, y, 300);
camera.lookAt(x, y, 0);

ThreeJS Tutorial: Map Case (Bounding Box, Orthographic Projection)

Map case (bounding box, orthographic projection)