天空的 A 帧 360 度图像答案

【问题标题】：A-Frame 360 image for sky天空的 A 帧 360 度图像
【发布时间】：2017-04-17 16:00:42
【问题描述】：

我正在尝试使用一个 URL 来拍摄以 Theta S 作为我的天空的 360 度全景照片。我已经能够使用本地文件执行此操作，但是当我尝试将其作为 URL 引用时，它不起作用。代码看起来很简单，所以我不确定它为什么不起作用。我尝试在多个浏览器上运行它，包括 Nightly。

   <!DOCTYPE html>
<html>
    <head>
        <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
    </head>
    <body>
        <a-scene>
            <a-assets>
                <img id="mall" src="http://www.mycode.zone/res/dc-mall.JPG">
            </a-assets>
            <a-sky src="#mall"></a-sky>
            <a-entity position="0 0 1.5">
                <a-camera></a-camera>
            </a-entity>
    </a-scene>
    </body>
</html>

【问题讨论】：

标签： cors aframe

【解决方案1】：

由于服务器的 CORS 政策，该图像的托管方式不允许其他站点使用文档中的图像。如果我使用来自 Mozilla 的示例天空盒图像，则您的代码可以工作：

<img id="mall" src="https://aframe.io/aframe/examples/showcase/composite/lake.jpg">

在您的开发者控制台中查看您的原始代码，您会看到如下内容：

从“http://www.mycode.zone/res/dc-mall.JPG”访问图像来源“http://s.codepen.io”已被 CORS 策略阻止：否 'Access-Control-Allow-Origin' 标头出现在请求的资源。因此不允许使用原点“http://s.codepen.io” 访问。

这是工作的代码笔：http://codepen.io/anon/pen/dOdmNo

【讨论】：