如何建立一个室内3d导航项目（三）- mapbox引入模型

import { Threebox } from 'threebox-plugin'; 

//初始化控制模型显示隐藏的标志
const preloadedModels = {};

//控制指定id模型的显示，并隐藏其他模型
const toggleModelVisibility = (id) => {
  Object.keys(preloadedModels).forEach((key) => {
    const model = preloadedModels[key];
    if (key === id) {
      model.hidden = false;
    } else {
      model.hidden = true;
    }
  });
};

//多个模型的初始化参数
const floors = [
  {
    drawableName: "model0",
    model: true,
    rotation: {
      x: 90,
      y: -155.54446027115023,
      z: 0,
    },
    scale: 5.66,
    modelCoords: [121, 31, 2],
  },
  {
    drawableName: "model1",
    model: false,
    rotation: {
      x: 0,
      y: 0,
      z: 0,
    },
    scale: 1,
    modelCoords: [0, 0, 0],
  },
  {
    drawableName: "model2",
    model: true,
    rotation: {
      x: 90,
      y: -154.54739701601238,
      z: 0,
    },
    scale: 10.03,
    modelCoords: [121, 31, 4],
  },
  {
    drawableName: "model3",
    model: false,
    rotation: {
      x: 0,
      y: 0,
      z: 0,
    },
    scale: 1,
    modelCoords: [0, 0, 0],
  },
]

//批量加载模型函数
const preloadModels = (onComplete) => {
  let loadedCount = 0;
  const total = floors.length;

  floors.forEach(({ drawableName, scale, modelCoords, rotation }) => {
    const newModelUrl = './model/' + PROJ + '/' + drawableName + '.glb';
    const options = {
      id: drawableName,
      obj: newModelUrl,
      type: 'gltf',
      scale: scale,
      units: 'meters',
    };

    tb.loadObj(options, (model) => {
      model.setCoords(modelCoords);//设置模型经纬度
      model.setRotation(rotation);//设置旋转角度
      window.tb.add(model);
      preloadedModels[drawableName] = model;//将模型对象放入preloadedModels以便后续控制

      model.hidden = true;//加载模型后隐藏该模型

      // 每个模型加载完成后检查进度
      loadedCount++;
      if(loadedCount === total && onComplete) {
        onComplete(); // 全部加载完成时执行回调
      }
    });
  });
};

//地图初始化时批量加载模型
mapInstance.on('load', async () => {

  mapInstance.addLayer({
    id: 'custom_layer',
    type: 'custom',
    renderingMode: '3d',
    onAdd: function(map, mbxContext) {
      window.tb = new Threebox(map, mbxContext, {
        defaultLights: true,
        antialias: true,
      });
      window.tb.enableSelectingObjects = true; //允许拾取对象，值为false的情况下点击获取不到gltf

      // 调用时传入回调函数
      preloadModels(() => {
        console.log('所有模型加载完成！');
        
      });
    },
    render: function(gl, matrix) {
      tb.update();
    }
  });



});