在mapbox中使用Tween.js实现3D对象的随机动画

<canvas id="mapCanvas"></canvas>

var canvas = document.getElementById('mapCanvas');
var ctx = canvas.getContext('2d');

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

var customLayer = {
  id: 'customLayer',
  type: 'custom',
  renderingMode: '3d',
  onAdd: function(map, gl) {
    this.camera = new THREE.Camera();
    this.scene = new THREE.Scene();

    // 创建一个3D对象
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: 'red' });
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(lng, lat, 0); // 设置初始位置
    this.scene.add(mesh);
  },
  render: function(gl, matrix) {
    var rotationX = Math.random() * Math.PI * 2; // 生成随机旋转角度
    var rotationY = Math.random() * Math.PI * 2;
    var rotationZ = Math.random() * Math.PI * 2;

    // 使用Tween.js实现动画效果
    new TWEEN.Tween(mesh.rotation)
      .to({ x: rotationX, y: rotationY, z: rotationZ }, 1000)
      .easing(TWEEN.Easing.Quadratic.Out)
      .start();

    // 渲染场景
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.useProgram(program);
    twgl.setBuffersAndAttributes(gl, program, bufferInfo);
    twgl.setUniforms(program, uniforms);
    twgl.drawBufferInfo(gl, bufferInfo);
  }
};

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

function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
  map.triggerRepaint();
}
animate();