Question

我正在使用javascript和Three.js库学习一些WebGL概念，但是我试图找出如何使用OBJLoader来使用类加载.obj文件时遇到了一些麻烦。下面是代码：

Model.prototype.loadModel = function () {
    var self = this;
    loader = new THREE.OBJLoader();

    loader.load( this.modelPath, function ( object ) {
        object.traverse( function ( child ) {
            if ( child instanceof THREE.Mesh ) {
                child.material.map = self.modelTexture;
            }
        });
        self.modelObj = object;
        console.log(self.modelObj); // Returns [Object object]
    });
        console.log(self.modelObj); // Returns undefined

    this.modelObj = self.modelObj;
    this.modelObj.position.x = this.x;
    this.modelObj.position.y = this.y;
    this.modelObj.position.z = this.z;
}

我无法将该对象用作匿名函数中的this.modelObj，我认为这是一个范围问题。尝试将this.modelObj添加到函数参数会导致“缺少形式参数”，并且在函数内使用this.认为它在函数（或加载器）的范围内

Answer 1

要在加载完成后调用回调，请将回调作为参数添加到您的函数中：

Model.prototype.loadModel = function (callback) {
    var self = this;
    var loader = new THREE.OBJLoader();

    loader.load(this.modelPath, function (object) { // inner function will be called on success
        object.traverse(function (child) {
            if (child instanceof THREE.Mesh)
            {
                child.material.map = self.modelTexture;
            }
        });

        self.modelObj = object;
        callback(object); // pass loaded object to callback function
    });
}

当您这样做时，您将加载逻辑与回调分开，在那里您将实际使用/使用已加载的数据。想象一下，你有这样的多个案例，你不必一遍又一遍地写出那个加载逻辑（内部的成功函数）。

XHR（在AJAX中使用）也接受错误函数，并要求您的函数检查readystate变量。我不知道这是否适用于这个装载机。但是如果可以的话，你也应该实现错误案例。

Answer 2

这不是范围界定的情况。问题是loader.load是异步函数调用（如AJAX）。因此，您应该使用回调来使代码正常工作。

JavaScript中的匿名函数的范围问题

2 个答案: