可视化-three.js绘制3D地球-给地图加载数据

给地图加上点数据

如何绘制地球连接
方法一：

地球展示数据，国家城市7W8+

使用shader渲染，性能好；缺点无法拾取，还有设置朝向等；

var data = [];//数据 格式 {x:0,y:0}
var dotPng2 = new THREE.TextureLoader().load('../image/dot2.png');//需要使用的贴图  如果不适用则是小方块
var geometry = new THREE.BufferGeometry();
var positions = [];//顶点
var sizes = [];//顶点 
var ponitShader = {
    vertexShader: `   
        attribute float u_size;
        void main() { 
            vec4 mP = modelViewMatrix * vec4( position, 1.0 );
            gl_PointSize = u_size * 300.0/(-mP.z );;
            gl_Position = projectionMatrix * mP;
        }
    `,
    fragmentShader: `
        uniform sampler2D u_txue; 
        uniform vec3 u_color;  
        void main() {
            gl_FragColor = vec4(u_color,1.0) * texture2D( u_txue,vec2(gl_PointCoord.x,1.0-gl_PointCoord.y) ); 
        }
    `
}
var uniforms = {
    u_txue: {
        value: dotPng2
    },
    u_color: {
        value: new THREE.Color("#5588aa")
    },
}
//材质
var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    transparent: true,
    depthTest: false,
    blending: THREE.AdditiveBlending,
    vertexShader: ponitShader.vertexShader,
    fragmentShader: ponitShader.fragmentShader,
});
for (let i = 0; i < data.length; i++) {
    var size = THREE.Math.randInt(1, 3);//大小
    var position = latLongToVector3({
        lat: data[i].x,
        lon: data[i].y,
        radius: _config.radius
    });//坐标转换
    positions.push(...Object.values(position));
    sizes.push(size);
}
geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.addAttribute('u_size', new THREE.Float32BufferAttribute(sizes, 1));
var mesh = new THREE.Points(geometry, material);
scene.add(mesh);

方法二：性能可以进一步优化（https://blog.csdn.net/qq_29814417/article/details/101541900）
优点：拾取目标，设置矩阵
缺点：数据量大时性能较低

var dotPng = new THREE.TextureLoader().load('../image/dot2.png')
var material = new THREE.MeshBasicMaterial({
    color: 0x8c3c23,
    side: THREE.DoubleSide,
    blending: THREE.AdditiveBlending,
    transparent: true,
    depthTest: false,
    map: dotPng
});
for (var i = 0; i < data.length; i++) {
    var size = THREE.Math.randInt(3, 5);
    var geometry = new THREE.PlaneBufferGeometry(size, size, 1);
    var plane = new THREE.Mesh(geometry, material);
    scene.add(plane);
    var position = latLongToVector3({
        lat: data[i].x,
        lon: data[i].y,
        radius: _config.radius
    })
    plane.position.set(...Object.values(position));
    plane.lookAt(new THREE.Vector3(0, 0, 0));
} 

坐标转换

		/**
	     * 经纬度坐标转换为 3D坐标系
	     * @param {float} opts.lat x
	     * @param {float} opts.lon y
	     * @param {float} opts.radius 球体半径
	     * @param {float} opts.rotation 倾斜
	     */
    	function latLongToVector3(opts) {
        opts = opts || {};
        var lat = opts.lat,
            lon = opts.lon,
            radius = opts.radius,
            rotation = opts.rotation || 0;
        var phi = (lat) * Math.PI / 180;
        var theta = (lon) * Math.PI / 180 + rotation;
        var x = (radius) * Math.cos(phi) * Math.cos(theta);
        var y = (radius) * Math.sin(phi);
        var z = (radius) * Math.cos(phi) * Math.sin(theta);
        return new THREE.Vector3(z, y, x);
    }

QQ交流群：740855975