A-frame vr的初学

发布于:2021-07-22 03:29:04

原文: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地址。


你应该会看到初始场景看起来像下图所示的样子?



六、?构建新场景

现在,让我们删除模板代码并去掉标记内的所有内容,仅留下部分。我们所有的A-Frame元素都将放于这个组件内部。目前代码如下所示:






Our First A-Frame Experience










A-Frame提供了一组原型,这些原型提供给我们VR场景中常用的元素。


接下来,让我们添加一些元素来搭建一个定制场景。


七、?创建天空

每一个场景都需要一个天空部分(或者是某种类型的背景)。这或者是一个单色图像或者是一幅全景图像。这部分内容的原型是


使用单色图像实现的天空部分的代码如下所示:



这将为我们的目标场景创建一个可爱的自然明亮的紫红色天空效果,如下图所示:






当我们使用如下代码把它置于我们的场景中时:



我们可以得到该场景的一个如下图所示的360度全景图:




以下有张照片是可以作为测试的:






具体怎样生成照片,可以参考:http://bbs.720yun.com/forum.php?mod=viewthread&tid=35


暂时没钱买相机,后续研究照片合成。

相关推荐

最新更新

猜你喜欢