寫在前面的話：開發(fā)者需要了解基本的前端知識(shí)一姿，如html+css，js等跃惫，最好具備三維建模經(jīng)驗(yàn)叮叹，使用過3dmax或maya等軟件，當(dāng)然辈挂，如果你只懂一點(diǎn)或者完全不懂，沒關(guān)系裹粤，興趣永遠(yuǎn)是學(xué)習(xí)的最好伙伴终蒂，跟著我蜂林，一步一步來，開心最重要拇泣。粗體文字為需要注意的步驟噪叙。
1.工具
1.1 注冊(cè)github
官網(wǎng)地址：https://github.com/
操作：已經(jīng)注冊(cè)的直接登錄，沒有賬號(hào)的選擇sign up霉翔，英語發(fā)展中階段的萌新請(qǐng)注意睁蕾，中間有向注冊(cè)郵箱發(fā)送郵件確認(rèn)的步驟。
作用：用來與其他網(wǎng)站連接债朵，保存代碼子眶。
1.2 使用谷歌瀏覽器
1.3 A-Frame
主角登場(chǎng)，例行介紹序芦。進(jìn)入https://aframe.io/臭杰，可以看到以下界面，點(diǎn)擊右側(cè)docs谚中，可以看到如下介紹：
A-frame由Mozilla團(tuán)隊(duì)開發(fā)渴杆，屬于獨(dú)立開源項(xiàng)目。簡(jiǎn)單來說宪塔，A-frame是一個(gè)基于html的web框架磁奖，可以用來開發(fā)VR項(xiàng)目。用戶可以在html文件中直接開發(fā)某筐，利用Glitch進(jìn)行在線代碼編輯比搭，不需要安裝其他軟件，上手簡(jiǎn)單来吩。因?yàn)槠浜?jiǎn)單強(qiáng)大的優(yōu)點(diǎn)敢辩，深受大家喜愛。但它并不是3D場(chǎng)景的圖片或者標(biāo)記語言弟疆，它的核心是實(shí)體組件系統(tǒng)（entity-component-system）戚长。A-frame還有很多有點(diǎn)特征，如良好的跨平臺(tái)性等等怠苔。
如果不適應(yīng)英文閱讀同廉，可以嘗試中文文檔：http://www.techbrood.com/aframe。
2.Step one?
默認(rèn)大家已經(jīng)基本瀏覽過一遍文檔柑司，我們開始第一步迫肖，先跟我默念一句，“隱藏著巨大黑暗力量的框架攒驰，封印解除蟆湖！”。
目標(biāo)：初步了解A-frame框架玻粪，可以進(jìn)行簡(jiǎn)單的代碼修改隅津。
操作：打開谷歌诬垂，登錄github—進(jìn)入aframe.io，點(diǎn)擊左上的“Hello WebVR”—點(diǎn)擊右側(cè)的“VIEW SOURCE”伦仍，進(jìn)入Glitch—選擇Remix your own结窘，進(jìn)入如下界面：
這樣我們就把A-frame和Github連接起來了（注意:請(qǐng)先登錄Github然后快捷登錄，或者在左側(cè)的sign up使用Github賬號(hào)密碼登錄）充蓝，點(diǎn)擊index.html可以查看默認(rèn)的代碼隧枫，點(diǎn)擊紅框處的Show，可以看到代碼對(duì)應(yīng)的3D圖形界面谓苟。簡(jiǎn)單說官脓，只要我們?cè)趇ndex.html界面進(jìn)行代碼修改，都可以同步到對(duì)應(yīng)的界面娜谊。
首先我們來看看index.html中的代碼确买。撲面而來的html熟悉感，頭部略過纱皆。
line6：script標(biāo)記湾趾，引入外部鏈接https://aframe.io/releases/0.6.0/aframe.min.js；
body：a-frame的所有元素都包含在<a-scene>標(biāo)簽之中派草，如sky搀缠、plane、box等等近迁，代碼只需要該區(qū)間中修改艺普；
position：x、y鉴竭、z軸坐標(biāo)歧譬，調(diào)整實(shí)體位置；
width搏存、height瑰步、depth：調(diào)整實(shí)體大小璧眠；
color：任選16進(jìn)制代碼缩焦；
rotation：x、y责静、z的值是指沿x袁滥、y、z軸旋轉(zhuǎn)灾螃，也就是想要左右旋轉(zhuǎn)题翻，你需要調(diào)整的是y軸，而不是x軸坐標(biāo)腰鬼，可以想想初中數(shù)學(xué)的圖形旋轉(zhuǎn)嵌赠。
快捷鍵：ctrl+alt+i組合鍵靴拱，可以切換至元素檢測(cè)模式，這個(gè)很重要猾普，之后再介紹；鍵盤上的WASD鍵本谜，作用你們自己探索初家，有種回到4399小游戲的感覺。
2.1 練習(xí)
了解完基本代碼后乌助，我們可以自己改變已有屬性的數(shù)值溜在，如position等，來熟悉x他托、y掖肋、z軸的正負(fù)方向，以及旋轉(zhuǎn)角度赏参。
這是我做的一個(gè)圖形志笼，相信你們的肯定更漂亮。
嘗試的過程中有沒有發(fā)現(xiàn)一個(gè)問題把篓，如何調(diào)整軸坐標(biāo)才能使立方體恰好合在一起纫溃？拿我做的蛋糕舉例子，不就是四個(gè)正方體疊在一起韧掩，x紊浩、z軸坐標(biāo)不變，調(diào)整y軸就好疗锐？這有什么難的坊谁，試試看就會(huì)發(fā)現(xiàn)，如果你不懂其中的規(guī)律滑臊，那么你需要大量的嘗試口芍，一點(diǎn)點(diǎn)調(diào)整，既麻煩又浪費(fèi)時(shí)間简珠。我把代碼給大家看看阶界，你能找到規(guī)律嗎？
要了解其中的規(guī)律聋庵，我們先看另外一張圖上的小白板（上課偷拍的）：
我先解釋：A-frame中y軸的坐標(biāo)計(jì)算公式膘融，從下往上看，第一個(gè)正方體的高設(shè)為h1祭玉，其y軸坐標(biāo)默認(rèn)為其中心氧映，值可以設(shè)為0或其他數(shù)值（我設(shè)為1），第二個(gè)正方體的高設(shè)為h2脱货，因此y軸坐標(biāo)為h1/2+h2/2,因此圖片中正方體的y軸坐標(biāo)為（4/2+3/2）=3.5岛都，以此類推律姨。這樣你就能得到嚴(yán)絲合縫的“蛋糕”。不妨在自己的圖形上動(dòng)手試試臼疫。
3.Step two
默認(rèn)已經(jīng)熟悉以上操作择份。看到這里烫堤，和我一樣的同學(xué)就會(huì)想荣赶，這么麻煩，用代碼做自己想要的物體鸽斟，一邊寫還要一邊查看圖形界面拔创，還不如用maya，直接上手多么方便富蓄，其實(shí)在A-frame中也可以直接操作剩燥，這就需要打開我們的Visual inspector，在圖形界面使用快捷鍵“ctrl+alt+i”立倍，進(jìn)入元素檢測(cè)模式灭红，進(jìn)入如下界面：
像不像熟悉的maya軟件呢？在這里口注，我們可以更加簡(jiǎn)單方便的進(jìn)行創(chuàng)建實(shí)體比伏。比如拖拉操作調(diào)整左邊，旋轉(zhuǎn)疆导，增加不同形狀的實(shí)體等等赁项，但也要一些需要我們非常注意的地方。
用了一天時(shí)間做了一個(gè)辣眼睛的雷鋒的宿舍澈段，給大家長(zhǎng)長(zhǎng)自信悠菜。
