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），是因为XHR请求正在进行且对象为null时发生了“ car.position.x”。我的代码不等。但是（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;