在将其添加到场景之前返回加载的 GLTF 对象答案

【问题标题】：Returning a loaded GLTF object before adding it to the scene在将其添加到场景之前返回加载的 GLTF 对象
【发布时间】：2020-03-31 01:33:50
【问题描述】：

我一直在尝试各种方法来做这样的事情：我想加载一个模型，然后让函数返回它

var loader = new THREE.GLTFLoader();
loader.crossOrigin = true;

var loadedModel = loader.load('model.gltf', function (data) {
    var object = data.scene;
    return object;
}

然后调用另一个函数并传递loadedModel:

loadToScene(loadedModel);

此外，我希望它可以根据需要多次加载到场景中：让我们在这里硬编码两次：

function loadToScene(model){
model.position.set(0,0,0);
scene.add(model);
model.position.set(0,0,5);
scene.add(model);
}

一旦loader 的范围结束，我就找不到保留data.scene 的方法。有没有办法实现它？

【问题讨论】：

标签： javascript three.js 3d javascript-objects gltf

【解决方案1】：

为了在您的 .gltf 文件加载后调用loadToScene，您需要在回调函数内部进行：

var loader = new THREE.GLTFLoader();
loader.crossOrigin = true;

loader.load('model.gltf', function (data) {
    var object = data.scene;

    // Use loadToScene function *inside* the callback
    // since we don't know when it will finish loading
    loadToScene(object);
}

并且要将模型两次添加到场景中，您需要先clone it。否则，将同一对象添加到场景中两次不会执行任何操作：

function loadToScene(model){
    // Add original object
    model.position.set(0,0,0);
    scene.add(model);

    // Clone a copy
    var model2 = model.clone(true);
    model2.position.set(0,0,5);
    scene.add(model2);
}

【讨论】：