HelloWorld源码:简单易懂,适合Mozilla创建的VR内容

HelloWorld源码:简单易懂,适合Mozilla创建的VR内容

0 1.25 -5" 半径="1.25" 颜色="#EF2D5E">

1 0.75 -3" 半径="0.5" 颜色="#FFC65D">

0 0 -4" 旋转="-90 0 0" 颜色="#7BC8A4">

#ECECEC">

从Hello World源码中我们可以看到A-Frame非常结构化,简单易懂,适合初学者。 这就是Mozilla创建A-Frame的初衷。 当然,这个例子只是一个Hello World场景。 创建VR内容,我们不会满足于基本的几何形状、简单的位移和单一的颜色。 我们需要自己的模型素材,也许我们还想实现360°全景的效果。 别担心技能特效,这些也很容易实现。

----模型导入

据官网介绍,A-Frame兼容DAE或OBJ型号。 例如,导入OBJ模型时,建议首先在框架下加载并定义a-asset-item游戏角色,并指定.obj文件和.mtl文件的路径:

路径/deer.obj">

路径/deer.mtl">

……

加载定义后unity如何生成全景图,将模型用作a-obj-model并使用之前定义的id。

#test-obj" mtl="#test-mtl">

unity全景图制作方法_unity制作全景图片_unity如何生成全景图

模型导入

效果如上图。 可以看到使用官网说明的方法可以导入模型,但是缺少纹理。 A-frame中使用obj文件生成的MTL仅支持简单单色材质的导入。 如果要导入纹理,必须用材质图片路径重新定义材质,还可以添加法线贴图等信息。

#test-obj"材质="src: url(path/deer.png); 法线贴图: url(path/deerBump.png)">

DUANGunity如何生成全景图,模型和材料导入完成。

unity制作全景图片_unity全景图制作方法_unity如何生成全景图

将材质贴图添加到模型中

---- 360°全景

实现 360° 非常容易。 如果要显示全景,只需在背景定义中添加全景信息即可得到360°全景显示; 同样,A-Frame也支持360全景视频,只需使用一个标签即可。 可以完成:

路径/pano.png">

路径/pano.mp4">

unity如何生成全景图_unity全景图制作方法_unity制作全景图片

360°全景

简单但功能强大的 A 型框架当然远不止于此。 它还支持骨骼动画、灯光、相机、各种交互等功能。 这也是WebVR的特点。 它新颖、人性化、使用快捷、内容丰富、传播广泛。 快来加入这股VR与Web双重革命的大潮流吧!

参考:

点击

立即阅读相关好文章

》谈贪心设计丨丨

核心设计分析

...

近期热门文章

文章来源:https://m.sohu.com/a/116821423_466876