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">
模型导入
效果如上图。 可以看到使用官网说明的方法可以导入模型,但是缺少纹理。 A-frame中使用obj文件生成的MTL仅支持简单单色材质的导入。 如果要导入纹理,必须用材质图片路径重新定义材质,还可以添加法线贴图等信息。
#test-obj"材质="src: url(path/deer.png); 法线贴图: url(path/deerBump.png)">
DUANGunity如何生成全景图,模型和材料导入完成。
将材质贴图添加到模型中
---- 360°全景
实现 360° 非常容易。 如果要显示全景,只需在背景定义中添加全景信息即可得到360°全景显示; 同样,A-Frame也支持360全景视频,只需使用一个标签即可。 可以完成:
路径/pano.png">
路径/pano.mp4">
360°全景
简单但功能强大的 A 型框架当然远不止于此。 它还支持骨骼动画、灯光、相机、各种交互等功能。 这也是WebVR的特点。 它新颖、人性化、使用快捷、内容丰富、传播广泛。 快来加入这股VR与Web双重革命的大潮流吧!
参考:
点击
立即阅读相关好文章
》谈贪心设计丨丨
丨
丨
核心设计分析
...
近期热门文章