AFrame+MagicaVoxel：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工程师。