原文：http://mobile.51cto.com/hot-508669.htm，我用了他的npm command和a-sky src，但是当我调用iphone全景图片时，他报错，可能是图片太大了吧，不过我把图片压缩成4096 * 2048依旧是这个错。所以我换了下面的source code： https://github.com/aframevr/360-image-gallery-boilerplate，用同样的npm command，替换了其中的一张图片，当然替换的是4096*2048，那就没问题，不过效果就是每个人都想榄核形状，应该是这个模板就是将图片弄成3D榄核。如果不用npm，直接下source code，然后替换index.html的image，就会报cross-origin跨域问题。
下面是原文我试过的：
使用A-Frame样板（https://github.com/aframevr/aframe-boilerplate/archive/master.zip）进行工作。
为了运行本地Web服务器，请从你的终端/命令提示符下切换到你的模板项目文件夹中，然后运行下面的命令︰
npm install && npm start
这将安装Web服务器必需的所有文件，然后运行它。之后，如果你想要再次运行服务器，只需运行命令“npm start”。
一旦运行本地Web服务器，它应会自动打开我们的web浏览器并加载我们的模板网页文件。模板中加入了LiveReload支持——这意味着，无论何时更改页面其内容都会自动刷新。
如果你需要在不同的设备上打开网页，或者在运行本地Web服务器后网页不会自动打开，您可以通过在你的浏览器输入http://localhost:3000或者http://192.168.0.1:3000。注意，这里的IP地址正对应于你的计算机的IP地址。
你应该会看到初始场景看起来像下图所示的样子︰
六、 构建新场景
现在，让我们删除模板代码并去掉<body>标记内的所有内容，仅留下<a-scene>部分。我们所有的A-Frame元素都将放于这个<a-scene>组件内部。目前代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Our First A-Frame Experience</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
</a-scene>
</body>
</html>
A-Frame提供了一组原型，这些原型提供给我们VR场景中常用的元素。
接下来，让我们添加一些元素来搭建一个定制场景。
七、 创建天空
每一个场景都需要一个天空部分（或者是某种类型的背景）。这或者是一个单色图像或者是一幅全景图像。这部分内容的原型是<a-sky>。
使用单色图像实现的天空部分的代码如下所示：
这将为我们的目标场景创建一个可爱的自然明亮的紫红色天空效果，如下图所示：
当我们使用如下代码把它置于我们的场景中时：
我们可以得到该场景的一个如下图所示的360度全景图：
以下有张照片是可以作为测试的：
具体怎样生成照片，可以参考：http://bbs.720yun.com/forum.php?mod=viewthread&tid=35
暂时没钱买相机，后续研究照片合成。
扫一扫
2644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
