A-Frame是一款開源的可通過定制HTML元素構建WebVR方案的框架。有了這個框架，Web程序員無需學習一門全新的語言或者類似於Unity和Unreal這樣的三維引擎就可以在Web開發中加入虛擬現實支持。作為一個入門教程，本文將引導你一步步實現構建一個加入Web虛擬現實支持的Web頁面的全過程。
A-Frame框架的入門級教程頁面（https://aframe.io/docs/guide/getting-started.html)
忽略以上介紹,簡單粗暴 直接下載...找到並打開inex.html
A-Frame樣板（https://github.com/aframevr/aframe-boilerplate/archive/master.zip)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>A-Frame Street Demo</title> <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script> </head> <body> <a-scene> <a-assets> <img id="darktexture" src="blacktexture.png"> </a-assets> <a-box color="#B76705" depth="2" height="2" width="4" position="0 0 -1.25"></a-box> <a-cylinder color="#1E130E" height="40" radius="0.5" position="-40 0 -8"></a-cylinder> <a-cylinder color="#1E130E" height="40" radius="0.5" position="-10 0 -8"></a-cylinder> <a-cylinder color="#1E130E" height="40" radius="0.5" position="20 0 -8"></a-cylinder> <a-cylinder color="#1E130E" height="40" radius="0.5" position="50 0 -7"></a-cylinder> <a-sphere src="#darktexture" radius="2" position="0 15 20"></a-sphere> <a-sky src="res.jpg"></a-sky> </a-scene> </body> </html>
圖片素材:https://flic.kr/p/bCMJ4X小結.本文轉自 51cto.com