mapbox+three.js实现泛光效果

在Mapbox和Three.js中实现泛光效果，你需要先设置好Mapbox地图，并在其上面设置Three.js场景。然后，你可以使用Three.js的ShaderMaterial和自定义的光线Shader来实现泛光效果。

以下是一个简化的例子，展示如何在Mapbox地图上实现泛光效果：

// 初始化Mapbox地图
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v110',
    center: [0, 0],
    zoom: 
});
 
// 初始化Three.js场景与相机
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 1;
 
// 创建一个用于渲染的canvas
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建泛光效果的材质
var glowMaterial = new THREE.ShaderMaterial({
    uniforms: {
        'c': { value: new THREE.Color(0xff00ff) },
        'p': { value: 10 },
        'glowEmission': { value: 1.0 },
        'glowColor': { value: new THREE.Color(0xff00ff) },
        'glowWeight': { value: 1.75 },
        'viewVector': { value: new THREE.Vector3() }
    },
    vertexShader: `
        varying vec3 vNormal;
        varying vec2 vUv;
        varying float intensity;
        uniform vec3 viewVector;
        void main() {
            vNormal = normalize(normalMatrix * normal);
            vUv = uv;
            vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
            intensity = pow(abs(dot(vNormal, normalize(viewVector))), 2.0);
            gl_Position = projectionMatrix * mvPosition;
        }
    `,
    fragmentShader: `
        uniform vec3 glowColor;
        uniform float glowEmission;
        uniform float glowWeight;
        varying vec2 vUv;
        varying vec3 vNormal;
        varying float intensity;
        void main() {
            vec3 glow = glowColor * glowEmission * intensity;
            gl_FragColor = vec4(glow, 1.0);
        }
    `
});
 
// 创建一个Three.js几何体，比如一个球体
var geometry = new THREE.SphereGeometry(1, 20, 20);
var sphere = new THREE.Mesh(geometry, glowMaterial);
scene.add(sphere);
 
// 将Three.js场景渲染到Mapbox地图上
map.on('load', function() {
    var mapCanvas = map.getCanvasContainer();
    var width = mapCanvas.offsetWidth;
    var height = mapCanvas.offsetHeight;
    renderer.setSize(width, height);
 
    // 定期更新camera和uniforms
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        var ve