AFrame+MagicaVoxel：WebVR端午龙头记

wyk1184 发布于2019-08-20 16:09 / 1336人阅读

摘要：最花时间的就是使用画的龙头，画了我两天近十几个小时。最终和大家分享成果，庆祝一年一度的端午节。此外，支持导出的两种方式与。当你选择的是时请注意，导出的是个文件缺一不可。关于作者个人博客沉迷前端美色的工程师。

效果展示：

☞ 点我打开新世界

相关技术：

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

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

代码实现：

    html:

代码分析：

由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工程师。

私有云云服务器 MagicaVoxel AFrame WebVR 记单词

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82752.html

浅谈 WebVR

摘要：它与智能手机相连接，将显示变成显示。厂商滑配式设备包括谷歌和三星。作为一款独立的计算设备，整合式设备将配备一整套零部件，价格甚至高于普通。厂商微软对于想初步体验或入门的用户，推荐谷歌的或国内的性价比高的滑配式设备。本文转自凹凸实验室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/bVC2cm...

yexiaobai 2019-08-22 10:38 评论0 收藏0
WebVR开发教程——深度剖析

摘要：片元着色器主要处理片元颜色，在这里只是将纹理坐标和纹理对象传给片元着色器。根据公式分别计算出左右视口的模型视图投影矩阵，传给顶点着色器程序，与顶点缓冲区的顶点坐标相乘绘制出最终顶点。最近WebVR API 1.1已经发布，2.0草案也在拟定中，在我看来，WebVR走向大众浏览器是早晚的事情了，今天本人将对WebVR开发环境和开发流程进行深入介绍。 WebVR与WebVR API 首先...

Cciradih 2019-08-20 18:37 评论0 收藏0
Web 前端中的增强现实（AR）开发技术

摘要：增强现实以下简称浪潮正滚滚而来，浏览器作为人们最唾手可得的人机交互终端，正在大力发展技术。目前年底前端要想实现，都是靠的视频透视式技术。但这两个都是移动的，于是谷歌的团队提供了和两个库，以便开发者能用技术来基于和开发，从而实现。本文作者 GeekPlux，博客地址：http://geekplux.com/2018/01/18/augmented-reality-development...

Jochen 2019-08-22 17:18 评论0 收藏0