人人都能做VR

写在前面的话:开发者需要了解基本的前端知识,如html+css,js等,最好具备三维建模经验,使用过3dmax或maya等软件,当然,如果你只懂一点或者完全不懂,没关系,兴趣永远是学习的最好伙伴,跟着我,一步一步来,开心最重要。粗体文字为需要注意的步骤。

1.工具

1.1 注册github

官网地址:https://github.com/

操作:已经注册的直接登录,没有账号的选择sign up,英语发展中阶段的萌新请注意,中间有向注册邮箱发送邮件确认的步骤

作用:用来与其他网站连接,保存代码。

1.2 使用谷歌浏览器

1.3 A-Frame

主角登场,例行介绍。进入https://aframe.io/,可以看到以下界面,点击右侧docs,可以看到如下介绍:

aframe.io首页
introduction

A-frame由Mozilla团队开发,属于独立开源项目。简单来说,A-frame是一个基于html的web框架,可以用来开发VR项目。用户可以在html文件中直接开发,利用Glitch进行在线代码编辑,不需要安装其他软件,上手简单。因为其简单强大的优点,深受大家喜爱。但它并不是3D场景的图片或者标记语言,它的核心是实体组件系统(entity-component-system)。A-frame还有很多有点特征,如良好的跨平台性等等。

如果不适应英文阅读,可以尝试中文文档:http://www.techbrood.com/aframe。

2.Step one 

默认大家已经基本浏览过一遍文档,我们开始第一步,先跟我默念一句,“隐藏着巨大黑暗力量的框架,封印解除!”。

目标:初步了解A-frame框架,可以进行简单的代码修改。

操作:打开谷歌,登录github—进入aframe.io,点击左上的“Hello WebVR”—点击右侧的“VIEW SOURCE”,进入Glitch—选择Remix your own,进入如下界面:


Glitch

这样我们就把A-frame和Github连接起来了(注意:请先登录Github然后快捷登录,或者在左侧的sign up使用Github账号密码登录),点击index.html可以查看默认的代码,点击红框处的Show,可以看到代码对应的3D图形界面。简单说,只要我们在index.html界面进行代码修改,都可以同步到对应的界面。


图形界面
index.html

首先我们来看看index.html中的代码。扑面而来的html熟悉感,头部略过。

line6:script标记,引入外部链接https://aframe.io/releases/0.6.0/aframe.min.js;

body:a-frame的所有元素都包含在<a-scene>标签之中,如sky、plane、box等等,代码只需要该区间中修改;

position:x、y、z轴坐标,调整实体位置;

width、height、depth:调整实体大小;

color:任选16进制代码;

rotation:x、y、z的值是指沿x、y、z轴旋转,也就是想要左右旋转,你需要调整的是y轴,而不是x轴坐标,可以想想初中数学的图形旋转。

快捷键:ctrl+alt+i组合键,可以切换至元素检测模式,这个很重要,之后再介绍;键盘上的WASD键,作用你们自己探索,有种回到4399小游戏的感觉。

2.1 练习

了解完基本代码后,我们可以自己改变已有属性的数值,如position等,来熟悉x、y、z轴的正负方向,以及旋转角度。

这是我做的一个图形,相信你们的肯定更漂亮。


example

尝试的过程中有没有发现一个问题,如何调整轴坐标才能使立方体恰好合在一起?拿我做的蛋糕举例子,不就是四个正方体叠在一起,x、z轴坐标不变,调整y轴就好?这有什么难的,试试看就会发现,如果你不懂其中的规律,那么你需要大量的尝试,一点点调整,既麻烦又浪费时间。我把代码给大家看看,你能找到规律吗?


code1

要了解其中的规律,我们先看另外一张图上的小白板(上课偷拍的):

prof1

我先解释:A-frame中y轴的坐标计算公式,从下往上看,第一个正方体的高设为h1,其y轴坐标默认为其中心,值可以设为0或其他数值(我设为1),第二个正方体的高设为h2,因此y轴坐标为h1/2+h2/2,因此图片中正方体的y轴坐标为(4/2+3/2)=3.5,以此类推。这样你就能得到严丝合缝的“蛋糕”。不妨在自己的图形上动手试试。

3.Step two

默认已经熟悉以上操作。看到这里,和我一样的同学就会想,这么麻烦,用代码做自己想要的物体,一边写还要一边查看图形界面,还不如用maya,直接上手多么方便,其实在A-frame中也可以直接操作,这就需要打开我们的Visual inspector,在图形界面使用快捷键“ctrl+alt+i”,进入元素检测模式,进入如下界面:


Visual inspector

像不像熟悉的maya软件呢?在这里,我们可以更加简单方便的进行创建实体。比如拖拉操作调整左边,旋转,增加不同形状的实体等等,但也要一些需要我们非常注意的地方。

用了一天时间做了一个辣眼睛的雷锋的宿舍,给大家长长自信。


略略略

心情好再更新。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,504评论 25 707
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,358评论 0 17
  • 最近《我的前半生》大火,朋友圈里充斥着各种评论:有人写女人一定要要自我修炼和成长,就有人写不要再黑全职太太了;有人...
    无为育儿阅读 334评论 0 1
  • 千秋岁引·游杨升庵祠 寒晨风疏, 慎公桂湖, 近门盘绕鸳鸯树。 大树小树紧依连, 说尽万千相思苦。 永昌卫, 榴阁...
    寺咀山主人阅读 266评论 0 0
  • 我记得很多人,他们某一个时段的手势和眼神,记得他们最美好的时间,她对我说,不要记得别人对你不好的时间,你应该记住的...
    李雲笙阅读 289评论 0 2