mapbox、three.js添加自定义3d模型

废话不多说，先看效果图

1、先初始化地图
我前面有完整的渲染地图的文章：https://blog.csdn.net/qq_41186500/article/details/103509936

    initMap() {
   
      mapboxgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA'
      this.map = new mapboxgl.Map({
   
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [118.78, 32.04],
        zoom: 10,
        container: 'mapbox'  // 盛放地图的容器id
      })
    },

2、添加自定义模型（正方体）

    initModel() {
   
      var map1 = this.map
      var modelOrigin = [118.78, 32.04]  // 添加模型的地理位置
      var modelAltitude = 0
      var modelRotate = [Math.PI / 2, 0, 0]
      var modelScale = 5.41843220338983e-8
        // transformation parameters to position, rotate and scale the 3D model onto the map
        var modelTransform = {
   
          translateX: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin , modelAltitude).x,
          translateY: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin , modelAltitude