Question

我有一个webgl应用程序，我正在加载这样的纹理：

var Texture2D = function(gl, mediaFileUrl) {
  mediaFileUrl = "../" + mediaFileUrl; //This is the line which not works
  this.mediaFileUrl = mediaFileUrl;
  this.glTexture = gl.createTexture();
  this.image = new Image();
  var theTexture = this;
  this.image.onload = function() { theTexture.loaded(gl); } // Never gets called
  this.image.src = mediaFileUrl;
};

如果我在文件系统中某处的父目录中有纹理，它就不起作用，但是如果我将我的文件放在其中一个子目录中（那么不使用../）就可以了。

文件结构如下所示 [index.html - texture.png] - Same folder = works

[index.html - ../texture.png] - 家长dir =无效

任何想法如何解决这个问题？

更新：它现在适用于chrome，但不适用于Firefox，这很奇怪。在Firefox中，如果我打开“匿名”标志（image.crossOrigin =“anonymous”），它无法加载图像，如果我关闭然后我收到安全错误。（错误：WebGL警告：texImage2D：跨源元素需要CORS）

Answer 1

对于安全限制，您需要从服务器http(s)://加载文件，而不是使用file://因此，您需要在项目中运行本地服务器才能在本地进行测试。

另一种方法是使用标志启动chrome以关闭安全限制：allow-file-access-from-files

用于OpenGL的Javascript纹理加载，相对路径不起作用

1 个答案: