A-Frame是用於構建虛擬現實（VR）體驗的開源Web框架。它由Supermedium（Diego Marcos，Kevin Ngo）和Google（Don McCurdy）的開發人員維護。 A-Frame是Three.js的實體組件系統框架，開發人員可以在其中使用HTML創建3D和WebVR場景。 HTML為Web開發人員和設計師提供了一個創作平臺，同時結合了諸如Unity之類的游戲引擎和開發模式。
該筆記根據我在glitch測試的mengtai-practice-1為例進行註釋。在這個範例中有一個基本場景和兩個事件（event）：圓柱體移動，光標移動向圓柱體會改變牆面的顏色。
PS：因爲我在牆前面放了一個燈，這看起來像是改變了光照的顔色，但其實只是改變了墻面顔色。因爲光沒有照到的地方是黑色的。
Demo Link: https://mengtai-practice-1.glitch.me/
https://mengtai-practice-1.glitch.me/
完整代碼**：**
<!DOCTYPE html>
<html>
<head>
<script src="[<https://aframe.io/releases/1.0.4/aframe.min.js>](<https://aframe.io/releases/1.0.4/aframe.min.js>)"></script>
<script src="[<https://unpkg.com/aframe-animation-component/dist/aframe-animation-component.min.js>](<https://unpkg.com/aframe-animation-component/dist/aframe-animation-component.min.js>)"></script>
</head>
<body>
<a-scene fog="type: linear; color: #AAB; far:18; near:0">
<a-cylinder
position="1 0.75 -3"
radius="0.5"
color="#0000FF"
animation="property: color; dir: alternate; dur: 3000; easing: easeInSine; loop: true; to: #F4D03F"
animation__scale="property: scale; dir: alternate; dur: 200; easing: easeInSine; loop: true; to: 0.2 2 2"
animation__position="property: position; dir: alternate; dur: 3000; easing: easeInSine; loop: true; to: 0 1 0"
>
</a-cylinder>
<a-box
position="-1 2.38341 -6.31613"
rotation=""
color="#abb0ae"
shadow=""
material=""
geometry="height: 5; width: 15"
vr-mode-ui=""
embedded=""
id="front wall"
></a-box>
<a-plane
position="0 0 -4"
rotation="-90 0 0"
width="4"
height="4"
color="#abb0ae"
shadow=""
material="color: #abb0ae; displacementScale: 2.26"
geometry="width: 50; height: 50"
></a-plane>
<a-entity
rotation=""
visible=""
light="angle: 55.09; decay: 15.58; distance: 11.78; intensity: 25; penumbra: 0.98; type: point; shadowBias: 22.2; shadowCameraFar: 498.01; shadowCameraFov: 93.7; shadowCameraNear: 19.21; shadowCameraTop: 27.19; shadowCameraRight: 25.34; shadowCameraVisible: false; shadowRadius: 22.95"
position="0.038 2.807 -4.195"
></a-entity>
<a-entity
light="angle: 60; decay: 2.5; distance: 8; intensity: 5; penumbra: 1; type: spot; shadowBias: 2.71; shadowCameraFar: 498.52; shadowCameraNear: 1.67; shadowCameraTop: 6.58; shadowCameraRight: 6.09; shadowCameraBottom: -25; shadowMapWidth: 520.6; shadowRadius: 5.19"
rotation="-90 0 0"
position="0 5 -2.5"
visible=""
id="key light top"
></a-entity>
<a-camera position="0 2 0" look-controls wasd-controls="acceleration: 500">
<a-cursor color="red"></a-cursor>
</a-camera>
</a-scene>
<script>
var box = document.querySelector("a-box");
box.addEventListener("mouseenter", function() {
box.setAttribute("color", "green");
});
box.addEventListener("mouseleave", function() {
box.setAttribute("color", "yellow");
});
</script>
</body>
</html>
在mengtai-practice-1這個範例中，主要存在三大部分，head，body，和在body中的script。
簡介： head是html的一個部分，由一個宣告“開始”和“結束”的語法構成：<head>（把code寫在這裏）</head>。它通常用來宣告一個matedata，是有關該html的文檔數據，不被顯示。它包含標題，字體符合，樣式，脚本，以及其他信息元素。
關於head詳見：https://www.w3schools.com/html/html_head.asp
在這個範例中，我用來head來召喚了兩個脚本，一個是aframe，另一個是aframe的動畫脚本。
簡介：body也是html的程序的主體，一個html文檔只能有一個body。這個部分也是我們來用aframe 寫webvr的主要地方。Aframe創建物體的組成方式為entity + component。比如，一個紅色的球，那麽承載這個紅色球的東西就是entity，球狀和紅色都是components，它們分別是geomety和color。