为skybox加载图像时出现跨原点问题

Cross-origin issue loading images for skybox

本文关键字：原点 问题 skybox 加载 图像      更新时间：2023-09-26

这让我抓狂。我正试图用我从互联网上得到的图像制作一个skybox。我的代码：

作为全局变量：

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="Anonymous"时；我得到这个错误：

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

我看到一些帖子说，运行chrome时使用--允许从文件访问文件或其他什么，但不想冒任何安全问题的风险。然后我看到其他人说要把图片放到网络服务器上？这件事我完全不知道该怎么做，为什么一定要这么复杂？？

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

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

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

无论如何，你需要一个完全合格的域名来消除CORS兼容的错误。从file:///加载webgl和图像将不起作用。

您使用什么来编辑代码？如果你试图从桌面上运行页面进行测试，那么我建议你使用brackets.io.

它很棒，免费，并且在构建代码时会让你绕过CORS问题。

相关文章：