More
More

WebVR端午龙头记

  • 效果展示

    点我打开新世界

    图片描述

    • 相关技术

      aframe.js: Mozilla 开源的网页虚拟现实体验( WebVR )框架;

      MagicaVoxel: @ephtracy开发的体素编辑神器;

  • 代码实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
html:
<script src="js/aframe.js"></script>
<script src="js/aframe-extras.loaders.min.js"></script>
<a-scene>
<a-assets>
<a-asset-item id="myModelObj" src="che.obj"></a-asset-item>
<a-asset-item id="myModelMtl" src="che.mtl"></a-asset-item>
<!-- <a-asset-item id="myPlyModel" src="che.ply"></a-asset-item> -->
<img id="skyTexture" src="image/sechelt.jpg">
</a-assets>
<a-entity position="0 1.2 -5" scale="0.035 0.035 0.035" rotation="-10 -150 -15" obj-model="obj: #myModelObj; mtl: #myModelMtl">
<a-animation attribute="position" to="0 1.4 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation>
<a-animation attribute="rotation" begin="click" dur="7200" to="-10 570 -15" ></a-animation>
</a-entity>
<!-- <a-entity ply-model="src: #myPlyModel" position="0 1 -1" scale="0.01 0.01 0.01" rotation="-90 0 0"></a-entity> -->
<a-sky src="#skyTexture" ></a-sky>
<a-text value="rebey.cn 端午节快乐!" color="#CCC"
position="-0.9 0.2 -3" scale="2 2 2"></a-text>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
  • 代码分析

    由aframe全权负责搭建3d全景,由 entity-龙头、sky-天空环境、text-文字、camera-模拟镜头焦点、assert-存放定义对象(通过id引用)构成。更多aframe知识点参考官网aframe.io。最花时间的就是使用MagicaVoxel画的龙头,画了我两天近十几个小时。最终和大家分享成果,庆祝一年一度的端午节。

  • 写在最后

    最重要的往往在最后。细心的你发现了吗?在源码中a-text的值明明写了中文却没有显示。是的,aframe用的字体不支持伟大的汉字,前端大神可以尝试一下更改aframe引用的字体。

    还有一点重要的是,引用aframe.js后必须运行在服务器端,否则可能出现浏览器提示跨域冲突的问题,可以将代码置于nodejs或者tomcat等服务器下运行。

    此外,aframe支持MagicaVoxel导出的两种方式.PLY (with Baked Shadows)与.OBJ。当你选择的是OBJ时请注意,导出的是3个文件(.obj/.png/.mtl)缺一不可。

  • 关于作者

    rebey.cn:个人博客-沉迷前端美色的java工程师,有工作机会欢迎联系。

打赏
手机扫一扫,支持CHE~