Question

我曾经使用mapbox gl和来自gltf的three.js在地图上添加link 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模型和自定义动画

-全面的射线广播支持MouseOver / Mouseout，Selected，Drag＆Drop，Drag＆Rotate，Wireframe

-考虑海拔高度的CSS2D工具提示和标签

**-Three.js和Mapbox相机通过深度调整同步**

-包括纪念碑的地理位置模型

Answer 2

如果模型彼此接近，是否尝试加载两个glTF模型并将它们添加到相同的THREE.Scene（）中？

即。 this.scene.add（gltf1.scene）; this.scene.add（gltf2.scene）;

您仍然需要计算gltf2相对于gltf1的偏移量/旋转角度。

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

2 个答案: