Javascript：为什么“纹理”是这样的？参数未定义？

发布于 2024-12-16 20:28:37 字数 1176 浏览 0 评论 0原文

我是 Javascript 新手，正在使用 WebGL 并在下面的代码中收到错误 “texture.image is undefined” 。当我使用 Firebug 调试它时， this.starshipTexture.image 正在初始化并加载图像文件，但是当调用 handleLoadedTexture(texture) 时，< code>texture 参数显示为未定义。

    starship.prototype.initTexture = function () {
        var starshipImage = new Image();
        this.starshipTexture = gl.createTexture();
        this.starshipTexture.image = starshipImage;

        starshipImage.onload = function () {
            handleLoadedTexture(this.starshipTexture)
        }
        starshipImage.src = "starship.gif";
    }

    function handleLoadedTexture(texture) {
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

        gl.bindTexture(gl.TEXTURE_2D, texture);

        //CRASHES ON THIS NEXT LINE
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
        gl.generateMipmap(gl.TEXTURE_2D);

        gl.bindTexture(gl.TEXTURE_2D, null);
    }

感谢您的智慧！

原文

I'm new to Javascript and I'm playing around with WebGL and getting the error, "texture.image is undefined" in the code below. When I debug it using Firebug, the this.starshipTexture.image is being initialized and loaded with the image file just fine, but when handleLoadedTexture(texture) is called, the texture parameter shows up as undefined.

    starship.prototype.initTexture = function () {
        var starshipImage = new Image();
        this.starshipTexture = gl.createTexture();
        this.starshipTexture.image = starshipImage;

        starshipImage.onload = function () {
            handleLoadedTexture(this.starshipTexture)
        }
        starshipImage.src = "starship.gif";
    }

    function handleLoadedTexture(texture) {
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

        gl.bindTexture(gl.TEXTURE_2D, texture);

        //CRASHES ON THIS NEXT LINE
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
        gl.generateMipmap(gl.TEXTURE_2D);

        gl.bindTexture(gl.TEXTURE_2D, null);
    }

Thanks for your wisdom!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅唱々樱花落 2024-12-23 20:28:37

问题是“加载”处理程序中的 this 并不是您所需要的。

相反，在设置处理程序之前将其填充到临时变量中：

var theStarship = this;
starshipImage.onload = function () {
        handleLoadedTexture(theStarship.starshipTexture)
};

The problem is that this, inside that "load" handler, won't be what you need it to be.

Instead, stuff it in a temporary variable before setting up the handler:

var theStarship = this;
starshipImage.onload = function () {
        handleLoadedTexture(theStarship.starshipTexture)
};

回复收藏 0 原文

拥抱影子 2024-12-23 20:28:37

要添加到 Pointy 的答案中，您可以这样做（这利用了奇妙的 javascript 鸭子类型）：

starshipImage.targetObject = this;
starshipImage.onload = function () {
    handleLoadedTexture(this.targetObject.starshipTexture)
};

To add to Pointy's answer, you could do this (which takes advantage of the marvelous javascript duck typing):

starshipImage.targetObject = this;
starshipImage.onload = function () {
    handleLoadedTexture(this.targetObject.starshipTexture)
};

回复收藏 0 原文

灼痛 2024-12-23 20:28:37

Pointy 答案的替代方法是使用 Function.bind 我觉得它更优雅，但做同样的事情，通常是一个选择的问题。

starshipImage.onload = handleLoadedTexture.bind(window,  this.starshipTexture);

这将创建一个“绑定”函数，即在调用函数之前设置上下文（在本例中不需要）和函数参数的函数。

The alternative to Pointy's answer is using Function.bind which I find more elegant, but does the same thing and is usually a matter of choice.

starshipImage.onload = handleLoadedTexture.bind(window,  this.starshipTexture);

That creates a "bound" function, that is, a function where the context (this, which is not needed in this case) and the arguments to the function are set before the function is called.

回复收藏 0 原文

~没有更多了~