使用 mapbox gl 和三个 js 在地图上的单个图层中渲染多个 gltf 3D 模型

Question

我使用 mapbox gl 和来自链接的three.js 在地图上添加gltf 3D 模型

但是在单个单独的图层中添加单个 3D gltf 模型并将它们添加到地图工作正常，但是有什么方法可以在地图的单个图层中添加多个 3D gltf 模型。

地图代码：

this.modelOrigin = [148.9819, -35.3981];
this.modelOrigin2 = [148.9819, -35.4981];
this.iconImage = "https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf";


//map info here
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
  center: [148.9819, -35.3981], // starting position[35.890, -75.664]
  zoom: 17.5, // starting zoom
  hash: true,
  minZoom: 0,
  maxZoom: 22,
  preserveDrawingBuffer: true,
  pitch: 60
});

var self = this;

map.on('style.load', function () {
 //adding separate 3d model on map
  map.addLayer(new AddMapCustomLayer(self.modelOrigin, self.iconImage));

  map.addLayer(new AddMapCustomLayer(self.modelOrigin2, self.iconImage));
});

自定义层的代码：

class AddMapCustomLayer {
  id;
  type="custom";
  renderingMode="3d";

  //
  modelOrigin;
  modelAltitude = 0;
  modelRotate = [Math.PI / 2, 0, 0];
  modelScale = 5.41843220338983e-8;

  modelTransform;

  camera;
  scene;

  map;

  renderer;

  iconImage;

  constructor(modelOrigin, iconImage) {
    this.id = '3d-model' + this.uuidv4();
    this.type = 'custom';
    this.renderingMode = '3d';
    this.modelOrigin = modelOrigin;
    this.iconImage = iconImage;

    // transformation parameters to position, rotate and scale the 3D model onto the map
    this.modelTransformation(this.modelOrigin,this.iconImage)
  }

  modelTransformation(modelOrigin,modelAltitude){

    this.modelTransform = {
      translateX: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).x,
      translateY: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).y,
      translateZ: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).z,
      rotateX: this.modelRotate[0],
      rotateY: this.modelRotate[1],
      rotateZ: this.modelRotate[2],
      scale: this.modelScale
    };

  }

  uuidv4() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  };

  onAdd(map, gl) {
    this.camera = new THREE.Camera();
    this.scene = new THREE.Scene();

    // create two three.js lights to illuminate the model
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(0, -70, 100).normalize();
    this.scene.add(directionalLight);

    var directionalLight2 = new THREE.DirectionalLight(0xffffff);
    directionalLight2.position.set(0, 70, 100).normalize();
    this.scene.add(directionalLight2);

    // use the three.js GLTF loader to add the 3D model to the three.js scene
    var loader = new THREE.GLTFLoader();
    loader.load(this.iconImage, (function (gltf) {
      this.scene.add(gltf.scene);
    }).bind(this));
    this.map = map;

    // use the Mapbox GL JS map canvas for three.js
    this.renderer = new THREE.WebGLRenderer({
      canvas: map.getCanvas(),
      context: gl
    });
    this.renderer.autoClear = false;
  }

  render(gl, matrix) {
    var rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), this.modelTransform.rotateX);
    var rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), this.modelTransform.rotateY);
    var rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), this.modelTransform.rotateZ);

    var m = new THREE.Matrix4().fromArray(matrix);
    var l = new THREE.Matrix4().makeTranslation(this.modelTransform.translateX, this.modelTransform.translateY, this.modelTransform.translateZ)
      .scale(new THREE.Vector3(this.modelTransform.scale, -this.modelTransform.scale, this.modelTransform.scale))
      .multiply(rotationX)
      .multiply(rotationY)
      .multiply(rotationZ);

    this.camera.projectionMatrix.elements = matrix;
    this.camera.projectionMatrix = m.multiply(l);
    this.renderer.state.reset();
    this.renderer.render(this.scene, this.camera);
    this.map.triggerRepaint();
  }

所以请给出建议，我如何才能通过单层在地图上的不同不同位置动态地添加相同的模型。

Answer 1

这个问题已经很老了，但我建议您查看Threebox的最新版本，因为它使您可以添加任意数量的模型和 3D 图层，而且只需几行代码即可执行以下操作

        map.on('style.load', function () {
        map.addLayer({
            id: 'custom_layer',
            type: 'custom',
            renderingMode: '3d',
            onAdd: function (map, mbxContext) {

                window.tb = new Threebox(
                    map,
                    mbxContext,
                    { defaultLights: true }
                );

                var options = {
                    obj: '/3D/soldier/soldier.glb',
                    type: 'gltf',
                    scale: 1,
                    units: 'meters',
                    rotation: { x: 90, y: 0, z: 0 } //default rotation
                }

                tb.loadObj(options, function (model) {
                    soldier = model.setCoords(origin);
                    tb.add(soldier);
                })

            },
            render: function (gl, matrix) {
                tb.update();
            }
        });
    })

- 3D 模型内置和自定义动画