ThreeJS 地球上撒點

環境

• ThreeJS 107版本
• three.min.js
• OrbitControls.js

說明

撒點功能原理是在地球上根據坐標批量加上圓對象，可以設置顏色和球大小。

解決方案

1. 創建球的過程參見"ThreeJS制作地球"

2. 創建點group，考慮后面會做刪除功能，所以把所有的實體都以group組為單位添加，后續方便做刪除

// 標記點組合
var marking = new THREE.Group();

3. 根據數據，循環添加圓以及材質

for (var i = 0; i < _markData.length; i++) {
// 創建標記點球體
var mark = new THREE.Mesh(new THREE.SphereGeometry(radius, 30, 30), new THREE.MeshBasicMaterial({
color: _style.color ? _style.color : '#1bb4b0'
}));
// 獲取標記點坐標
var markPos = this.getPosition(_markData[i].attributes.x + 90, _markData[i].attributes.y, 30);
mark.position.set(markPos.x, markPos.y, markPos.z);
marking.add(mark);
}
scene.add(marking);

4. 經緯度轉球坐標

this.getPosition = function (_longitude, _latitude, _radius) {
var lg = THREE.Math.degToRad(_longitude);
var lt = THREE.Math.degToRad(_latitude);
var temp = _radius * Math.cos(lt);
var x = temp * Math.sin(lg);
var y = _radius * Math.sin(lt);
var z = temp * Math.cos(lg);
return {
x: x,
y: y,
z: z
}
}

附上效果圖