生活随笔
收集整理的這篇文章主要介紹了
使用Threejs自己画一个河南省地图（超简单）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用技術：根據經緯度坐標集合，使用形狀幾何體ShapeGeometry繪制
根據包圍盒大小設置 正投影相機位置 系數
下面以河南省為例：
var arr
= [[110.3906, 34.585],[110.8301, 34.6289],[111.1816, 34.8047],[111.5332, 34.8486],[111.7969, 35.0684],[112.0605, 35.0684],[112.0605, 35.2881],[112.7637, 35.2002],[113.1152, 35.332],[113.6426, 35.6836],[113.7305, 36.3428],[114.873, 36.123],[114.9609, 36.0791],[115.1367, 36.2109],[115.3125, 36.0791],[115.4883, 36.167],[115.3125, 35.8154],[116.1035, 36.0791],[115.4883, 35.7275],[115.2246, 35.4199],[115.0488, 35.376],[114.7852, 35.0684],[115.4004, 34.8486],[115.5762, 34.585],[116.1914, 34.585],[116.1914, 34.4092],[116.543, 34.2773],[116.6309, 33.9258],[116.1914, 33.7061],[116.0156, 33.9697],[115.6641, 34.0576],[115.5762, 33.9258],[115.5762, 33.6621],[115.4004, 33.5303],[115.3125, 33.1787],[114.873, 33.1348],[114.873, 33.0029],[115.1367, 32.8711],[115.2246, 32.6074],[115.5762, 32.4316],[115.8398, 32.5195],[115.9277, 31.7725],[115.4883, 31.6846],[115.4004, 31.4209],[115.2246, 31.4209],[115.1367, 31.5967],[114.7852, 31.4648],[114.6094, 31.5527],[114.5215, 31.7725],[114.1699, 31.8604],[113.9941, 31.7725],[113.8184, 31.8604],[113.7305, 32.4316],[113.4668, 32.2998],[113.2031, 32.4316],[112.3242, 32.3438],[111.5332, 32.6074],[111.0059, 33.2666],[111.0059, 33.5303],[110.6543, 33.8379],[110.6543, 34.1455],[110.4785, 34.2334],[110.3906, 34.585]]var points
= [];arr
.forEach(elem => {points
.push(new THREE.Vector2(elem
[0], elem
[1]))});var shape
= new THREE.Shape(points
);var geometry
= new THREE.ShapeGeometry(shape
);var material
= new THREE.MeshPhongMaterial({color
: 0x0000ff,side
: THREE.DoubleSide
});var mesh
= new THREE.Mesh(geometry
, material
);scene
.add(mesh
);var width
= window
.innerWidth
; var height
= window
.innerHeight
; var k
= width
/ height
; var s
= 150; var camera
= new THREE.OrthographicCamera(-s
* k
, s
* k
, s
, -s
, 1, 1500);camera
.position
.set(400, 300, 500); camera
.lookAt(new THREE.Vector3(0, 0, 0)); var box3
= new THREE.Box3(); box3
.expandByObject(mesh
);console
.log('查看包圍盒box3', box3
);var size
= new THREE.Vector3();box3
.getSize(size
); console
.log('查看返回的包圍盒尺寸', size
);var center
= new THREE.Vector3();box3
.getCenter(center
); console
.log('查看幾何體中心坐標', center
);camera
.lookAt(center
); function render() {renderer
.render(scene
, camera
);requestAnimationFrame(render
);}render();var controls
= new THREE.OrbitControls(camera
, renderer
.domElement
);controls
.target
.copy(center
);controls
.update();
這樣一個河南省地圖就顯示出來了，如果想要地圖更精細，就設置更多更精細的經緯度坐標
總結
以上是生活随笔為你收集整理的使用Threejs自己画一个河南省地图（超简单）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
