引入资源

1. import * as THREE from “three”;
2. import { GLTFLoader } from “three/addons/loaders/GLTFLoader.js”;

1. loadModel(option) {
2. console.log(“option1”, option);
3. let model = null;
4. const loader1 = new GLTFLoader();
5. console.log(“loader1”, loader1);
6. loader1.load(option.url, (gltf) => {
7. model = gltf.scene;
8. model.position.set(option.x, option.y, option.z);
9. // 模型中添加
10. this.scene.add(gltf.scene);
11. });
12. console.log(“model1111”, model);
13. return model;
14. },

使用

1. let option = {
2. url: “./model/CesiumAir/Cesium_Air.glb”,
3. x: 15,
4. y: 5,
5. z: 0,
6. };
7. ffThree.loadModel(option);

异步加载

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

执行顺序问题

让我们来分析一下你的代码执行顺序：

1. 创建loader1实例: const loader1 = new GLTFLoader();
2. 调用loader1.load(): loader1.load(option.url, (gltf) => {...});
   • 此时，loader1.load开始加载模型，但是它是异步操作，会立即返回，继续执行后续代码。
3. 打印model变量: console.log("model1111", model);
   • 在加载完成之前，这行代码会打印model1111 null，因为model还没有被赋值。
4. 返回model: return model;
   • 函数会立即返回null，因为model还没有被赋值为加载完成的模型。

使用Promise对象 

一种常见的方法是利用Promise对象或者回调函数来处理异步加载的结果。例如，可以修改你的函数，使其返回一个Promise对象，当模型加载完成时，Promise对象resolve模型对象。

1. loadModelPromise(option) {
2. return new Promise((resolve, reject) => {
3. const loader1 = new GLTFLoader();
4. loader1.load(
5. option.url,
6. (gltf) => {
7. const model = gltf.scene;
8. model.position.set(option.x, option.y, option.z);
9. this.scene.add(model);
10. resolve(model); // 将加载的模型传递给Promise的resolve函数
11. },
12. undefined,
13. reject
14. );
15. });
16. },

• loadModel函数现在返回一个Promise对象，当模型加载成功后，Promise会resolve为加载的模型对象。
• 在加载成功的回调函数中，我们通过调用resolve(model)来传递加载的模型对象。

使用

1. let option = {
2. url: “./model/CesiumAir/Cesium_Air.glb”,
3. x: –15,
4. y: 5,
5. z: 0,
6. };
7. loadModelPromise(option).then((res) => {
8. console.log(“得到加载的glb模型，可以在这对其修改”, res);
9. // res.scale.set(0.1, 0.1, 0.1);
10. });

效果