用三个 js 意外排序反应 mapbox-gl 自定义层答案

【问题标题】：react mapbox-gl custom layer with three js unexpected ordering用三个 js 意外排序反应 mapbox-gl 自定义层
【发布时间】：2020-07-06 05:40:36
【问题描述】：

我正在研究 mapbox gl 以使用自定义图层显示 gltf 建筑物，并且我正在显示 mapbox 提供的默认 3d 建筑物，如下所示：

  export default {
  id: '3d-buildings',
  source: 'composite',
  'source-layer': 'building',

  filter: [
    'all',
    ['!=', ['id'], 59],
    ['!=', ['id'], 88],
    ['!=', ['id'], 79],
    ['!=', ['id'], 78],
    ['!=', ['id'], 80],
    ['!=', ['id'], 32],
    ['!=', ['id'], 8],
    ['!=', ['id'], 2],
    ['!=', ['id'], 4],
    ['!=', ['id'], 22],
    ['!=', ['id'], 3],
    ['!=', ['id'], 5],
    ['!=', ['id'], 60]
  ],
  type: 'fill-extrusion',
  minzoom: 1,
  paint: {
    'fill-extrusion-color': '#aaa',
    'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'height']],
    'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'min_height']],
    'fill-extrusion-opacity': 1
  }
};

我正在使用过滤器从地图中删除一些建筑物。这里我如何使用threebox 显示自定义层：

import Threebox from '../../../../../threebox/Threebox';

export default (buildings) => {
  return {
    id: '3d-layer',
    type: 'custom',
    renderingMode: '3d',
    onAdd: function(map, gl) {
      map.moveLayer('3d-buildings', '3d-layer');
      this.tb = new Threebox(map, gl);
      let allBuildings = buildings;
      this.tb.defaultLights();
      for (let i = 0; i < allBuildings.length; i++) {
        this.tb.loadObj({obj: allBuildings[i].url, scale: 0.08, rotation: allBuildings[i].rotation, building: allBuildings[i].id}, obj => {
          obj.setCoords(allBuildings[i].coordinates);
          this.tb.add(obj);
        });
      }
    },
    render: function(map, gl) {
      map.clear(map.DEPTH_BUFFER_BIT);
      this.tb.update();
    }
  };
};

渲染图层时的样子：

如您所见，自定义图层建筑物显示在3d-buildings 图层的顶部。我已经在网上搜索解决问题没有结果。如果有人可以帮助我解决它，我很感激。谢谢

【问题讨论】：

标签： javascript reactjs three.js mapbox

【解决方案1】：

我在 [Threebox fork] 微调 CameraSync 对象时解决了这个问题，改变了最近和最远的计算。

【讨论】：