Question

这让我疯了。我试图让天空盒处理我从互联网上获得的图像。我的代码：

作为全球变量：

var path = "file:///C:/Users/Tyler/Desktop/ComS_336_workspace/";
    var imageNames = [
                      path + "meadow_bk.jpg",
                      path + "meadow_ft.jpg",
                      path + "meadow_up.jpg",
                      path + "meadow_dn.jpg",
                      path + "meadow_rt.jpg",
                      path + "meadow_lf.jpg"
                      ];

在主要功能中：

   // load the six images
      //THREE.ImageUtils.crossOrigin = "Anonymous";
      var ourCubeMap = THREE.ImageUtils.loadTextureCube(imageNames);

但是得到这个错误：

DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/Tyler/Desktop/ComS_336_workspace/meadow_ft.jpg may not be loaded.

当我添加THREE.ImageUtils.crossOrigin =＆＃34; Anonymous＆＃34 ;;我收到这个错误：

Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access.

我看到一些帖子说要使用--allow-files-access-from-files或其他任何方式运行chrome，但不想冒任何安全问题。然后我看到其他人说将图像放在网络服务器上？我完全不知道该怎么办，为什么这一定要那么复杂？

我的html和js文件与我的图片位于同一个文件夹（ComS_336_workspace）。

我真的需要帮助才能做什么，如果我必须做一个网络服务器，我如何将我的图像放在他们身上并设置我的图像的路径？我不明白。

Answer 1

要解决此问题，您需要将远程文件保存到您的站点，或者使用站点中的某些代理脚本（例如PHP）来通过您的站点获取图像。

无论如何，您需要fully qualified domain name来摆脱符合CORS的错误。从file:///加载webgl和图片将无效。

Answer 2

您在编辑代码时使用了什么？如果您尝试从桌面运行该页面以进行测试，那么我建议brackets.io。

它很棒，免费，并且会在您构建代码时解决CORS问题。

为天空盒加载图像的跨源问题

2 个答案: