mapbox＋three.js

Mapbox 和 Three.js 是两个独立的开源项目，可以结合使用来创建交互式地图和可视化效果。Mapbox 是一个提供地图数据和地图服务的平台，而 Three.js 是一个基于 WebGL 的 3D 图形库。

结合 Mapbox 和 Three.js，你可以在地图上创建各种令人惊叹的视觉效果，例如在地图上展示 3D 模型、动态地图标记或者添加自定义的动画效果。

以下是一个简单的示例，展示如何在 Mapbox 地图上使用 Three.js 创建一个旋转的立方体：

1. 首先，引入 Mapbox 和 Three.js 的库文件，并创建一个容器来放置地图：

<div id="map"></div>

2. 然后，在 JavaScript 中初始化地图，获取地图容器的大小，并创建一个 Three.js 场景：

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [0, 0],
  zoom: 1
});

var scene = new THREE.Scene();

3. 接下来，在场景中创建一个旋转的立方体：

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 渲染 Three.js 场景
  renderer.render(scene, camera);
}

animate();

4. 最后，将 Three.js 的渲染结果嵌入到 Mapbox 地图中：

var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

function render() {
  requestAnimationFrame(render);

  // 将 Mapbox 地图渲染到 Three.js 的纹理上
  renderer.autoClear = false;
  renderer.clear();
  renderer.render(scene, camera);

  // 将 Three.js 的渲染结果放置在地图上
  map.triggerRepaint();
}

map.on('load', function() {
  map.on('render', render);
});

通过结合 Mapbox 和 Three.js，你可以根据自己的需求创建更复杂的交互式地图和可视化效果。希望这个例子能帮助到你！