天空的 A-Frame 360 图像
A-Frame 360 image for sky
我正在尝试使用 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 策略,图像的托管方式不允许其他站点使用文档中的图像。如果我使用来自 Mozilla 的示例天空盒图像,您的代码有效:
<img id="mall" src="https://aframe.io/aframe/examples/showcase/composite/lake.jpg">
在您的开发者控制台中查看您的原始代码,您会看到如下内容:
Access to Image at 'http://www.mycode.zone/res/dc-mall.JPG' from
origin 'http://s.codepen.io' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://s.codepen.io' is therefore not allowed
access.
我正在尝试使用 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 策略,图像的托管方式不允许其他站点使用文档中的图像。如果我使用来自 Mozilla 的示例天空盒图像,您的代码有效:
<img id="mall" src="https://aframe.io/aframe/examples/showcase/composite/lake.jpg">
在您的开发者控制台中查看您的原始代码,您会看到如下内容:
Access to Image at 'http://www.mycode.zone/res/dc-mall.JPG' from origin 'http://s.codepen.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.