javascript - OBJLoader 的异步问题 - 等待 XHR 完成加载

Question

如何让 OBJLoader 简单地返回对象而不是将它添加到场景中？我遇到了一个同步问题，我的代码没有等待 XHR 请求完成，就抛出了错误。

下面的例子说明了问题:

var loader = new THREE.OBJLoader();

// return a mesh from an obj file   
function createObject( objFile, objName ) {
    object3d = loader.load( objFile , function ( object ) {
        object.name = objName;            
        console.log(object);
        return object;
    })
    return object3d;
}

car = createObject('path/to/car.obj', 'abc123');
car.position.y = 10;

这会在控制台中生成以下内容:

1. Uncaught TypeError: Cannot set property 'position' of undefined test.html:171
2. XHR finished loading: GET "path/to/car.obj". Three.js:11377
3. THREE.Object3D {id: 7, uuid: "9E8DC838-E68B-4FCA-A6AD-863D5D06D31F", name: "abc123", parent: undefined, children: Array[1]…}

因此存在错误 (1)，因为“car.position.x”发生在 XHR 请求正在进行且对象为空时。我的代码不等待。但是 (2) 和 (3) 显示不久之后，加载请求确实成功完成。

我有什么想法可以让这项工作成功吗？如何让 createObject() 等到 XHR 请求完成后再继续？或者这通常只是一种糟糕的排序方式？

Answer 1

您可以在您的方法中创建一个“容器”，并在加载后将对象添加到该容器中。

var loader = new THREE.OBJLoader();

// return a mesh from an obj file   
function createObject( objFile, objName ) {
    var container = new THREE.Object3D();
    loader.load( objFile , function ( object ) {
        object.name = objName;
        container.add( object );
    })
    return container;
}

car = createObject('path/to/car.obj', 'abc123');
car.position.y = 10;