WebVR端午龙头记

• 效果展示：

  ☞ 点我打开新世界

  

  • 相关技术：

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

    ☞ MagicaVoxel： @ephtracy开发的体素编辑神器；

• 代码实现：

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工程师，有工作机会欢迎联系。