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
}
}

附上效果图