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

【问题标题】：Javascript Texture Loading for OpenGL, relative path not workingOpenGL的Javascript纹理加载，相对路径不起作用
【发布时间】：2017-05-18 06:25:21
【问题描述】：

我有一个 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] - 同一文件夹 = 作品

[index.html - ../texture.png] - 父目录 = 无效

有什么办法解决这个问题吗？

更新：它现在可以在 chrome 上运行，但不能在 Firefox 上运行，这很奇怪。在 Firefox 中，如果我打开 "anonymous" 标志 (image.crossOrigin = "anonymous") ，它无法加载图像，如果我关闭，则会出现安全错误。（错误：WebGL 警告：texImage2D：跨域元素需要 CORS）

【问题讨论】：

使用简单的服务器：试试Servez。有also others

标签： javascript webgl

【解决方案1】：

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

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

【讨论】：

我使用的是 Firefox，这样我就不需要那个标志了，纹理加载也可以，但是如果我在相对路径中使用“../”，它就不起作用
尝试在你的页面上设置<base>标签然后：w3schools.com/tags/tag_base.asp
在我看来，只有在我像 Web 服务器一样使用时才能使用。但我想在本地任何地方使用它。更新：图像的 onerror() 函数永远不会被调用，所以我认为图片已加载，但 webgl 不喜欢相对路径？
经过几次尝试后出现以下错误：错误：WebGL 警告：texImage2D：跨域元素需要 CORS。我找到了另一篇关于这个的文章，他们说我应该将 image.crossOrigin 设置为“匿名”，但是随后调用了图像的 onerror 函数，并且知道 webgl 抛出了安全错误
更新：它现在可以在 chrome 上运行，但不能在 Firefox 上运行，这很奇怪。（两种方式）在 Firefox 中，如果我打开“匿名”的东西，它无法加载图像，如果我关闭，则会出现安全错误