OpenGL 的 Javascript Texture Load，相对路径不起作用

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;
};

如果我在文件系统某处的父目录中有纹理，它不起作用，但是如果我将我的文件放在其中一个子目录中(所以不使用../( 它有效。

文件结构如下所示[索引.html - 纹理.png] - 相同的文件夹 = 工作

[索引.html - ./texture.png] - 父目录 = 不起作用

有什么想法可以解决这个问题吗？

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

Answer 1

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

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