函数调用

Question

我正在尝试创建一个简单的three.js应用，但我已经陷入了javascript的一些细微差别。我不知道如何在没有示例的情况下解释问题：

var Model = function() {
    THREE.Object3D.call(this);
    this.loadedMesh = null;
    this.meshIsLoaded = false;
};

Model.prototype = {
    constructor: Model,

    load: function(path, mtlName, objName) {
        var onProgress = function(xhr) {...};

        var onError = function(err) {...};

        THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader());
        mtlLoader.setPath(path);
        mtlLoader.load(mtlName, function(materials) {
            materials.preload();
            objLoader.setMaterials(materials);
            objLoader.setPath(path);
            objLoader.load(objName, function(object) {
                object.position.set(0, -5, 10);
                object.scale.set(5, 5, 5);
                object.rotation.y = Math.PI; // 180 degrees
                scene.add(object);
                this.loadedMesh = object;
                this.meshIsLoaded = true;
            });
        }, onProgress, onError);
    }
};

这个包装器应该是三个模型的容器。加载工作正常，但是当我尝试将模型保存到变量中时，没有任何内部成员在模型范围之外被更改。

var spaceman = new Model();
spaceman.load("ACES/", "acesjustforroomshow.mtl", "acesjustforroomshow.obj");
...
function update() {
    if (spaceman.meshIsLoaded)
        spaceman.loadedMesh.rotation.x += 0.1;
}

这很奇怪，因为如果我调试应用程序并等到模型加载，我可以将鼠标悬停在内部成员上并填充它们。当我将鼠标悬停在太空人对象上时，loadedMesh和meshIsLoaded的值仍然是默认值。

原型设计的某些方面我不理解吗？

Answer 1

我的猜测是问题是this变量。在您传递给objLoader.load的回调函数中，它可能不再设置为您的对象。如果我没错，以下任何一项修正都应该有效：

使用bind：

objLoader.load(objName, function(object) {
    object.position.set(0, -5, 10);
    object.scale.set(5, 5, 5);
    object.rotation.y = Math.PI; // 180 degrees
    scene.add(object);
    this.loadedMesh = object;
    this.meshIsLoaded = true;
}.bind(this));

在另一个变量中捕获this：

var that = this;
objLoader.load(objName, function(object) {
    object.position.set(0, -5, 10);
    object.scale.set(5, 5, 5);
    object.rotation.y = Math.PI; // 180 degrees
    scene.add(object);
    that.loadedMesh = object;
    that.meshIsLoaded = true;
});