Three.js 加载glb模型

引入资源

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

 loadModel(option) {
    console.log("option1", option);
    let model = null;
    const loader1 = new GLTFLoader();
    console.log("loader1", loader1);
    loader1.load(option.url, (gltf) => {
      model = gltf.scene;
      model.position.set(option.x, option.y, option.z);
      // 模型中添加
      this.scene.add(gltf.scene);
    });
    console.log("model1111", model);
    return model;
  },  

使用

let option = {
    url: "./model/CesiumAir/Cesium_Air.glb",
    x: 15,
    y: 5,
    z: 0,
  };
  ffThree.loadModel(option);

异步加载

GLTFLoader的load方法是异步的，意味着它会在加载完成前立即返回，并且不会阻塞后续代码的执行。因此，当你在加载完成前访问model变量时，它仍然是null，因为加载过程尚未完成。

执行顺序问题

让我们来分析