aframe開始使用aframe


備註

本節概述了aframe是什麼,以及開發人員可能想要使用它的原因。

它還應該提到框架內的任何大型主題,並鏈接到相關主題。由於aframe的文檔是新的,您可能需要創建這些相關主題的初始版本。

版本

A幀0.x

發布日期
0.6 2017年5月25日
0.5 2017年2月10日
0.4 2016年12月17日
0.3 2016年8月18日

舊版本

發布日期
0.2 2016年3月26日
0.1 2015年12月17日

特徵

VR變得簡單

只需放入script 標籤和a-scene 。 A-Frame將處理3D樣板,VR設置和默認控件。無需安裝,無需構建步驟。

聲明性HTML

HTML易於閱讀,理解和復制粘貼。基於HTML,A-Frame可供所有人使用:網絡開發人員,VR愛好者,藝術家,設計師,教育工作者,製造商,兒童。

跨平台VR

為Vive,Rift,Daydream,GearVR和Cardboard構建VR應用程序,支持所有相應的控制器。沒有耳機或控制器?沒問題! A-Frame仍適用於標準台式機和智能手機。

實體 - 組件架構

A-Frame是一個功能強大的three.js框架,提供了一個聲明性,可組合,可重用的實體組件structure.js。 HTML只是冰山一角;開發人員可以無限制地訪問JavaScript,DOM API,three.js,WebVR和WebGL。

性能

A-Frame從頭開始針對WebVR進行了優化。雖然A-Frame使用DOM,但其元素不會觸及瀏覽器佈局引擎。 3D對象更新都在內存中完成,在單個requestAnimationFrame調用下幾乎沒有開銷。供參考,請參閱A-Painter,一個內置在A-Frame中的Tilt Brush克隆,其運行方式與原生(90+ FPS)相同。

工具不可知

由於Web是基於HTML的概念構建的,因此A-Frame與大多數庫,框架和工具兼容,包括React,Preact,Vue.js,Angular,d3.js,Ember.js,jQuery。

視覺檢查員

A-Frame提供了一個方便的內置可視3D檢查器。打開任何A-Frame場景,點擊ctrl + alt + i ,然後飛來飛去躲在引擎蓋後面!

視覺檢查員

註冊處

採用開發人員發布的強大組件,並直接從HTML插件。與Unity資源商店類似,A-Frame Registry收集並管理這些組件以便於發現。

組件

使用A-Frame的核心組件(如幾何圖形,材質,燈光,動畫,模型,光線計,陰影,位置音頻,文本和Vive / Touch / Daydream / GearVR / Cardboard控件)來運行。進一步了解社區組件,如粒子系統,物理,多用戶,海洋,山脈,語音識別,動作捕捉,遠程傳送,超級手和增強現實。

入門

A-Frame可以從普通的HTML文件開發而無需安裝任何東西!嘗試使用A-Frame重新組合Glitch上的入門示例的好方法,Glitch是一個即時託管和免費部署的在線代碼編輯器。或者創建.html 文件並在head 包含A-Frame:

<html>
  <head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>
 

包括JS Build

要將A-Frame包含到HTML文件中,我們刪除指向CDN構建的script 標記:

<head>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
 

從npm安裝

我們也可以通過npm安裝A-Frame:

$ npm install aframe
 

然後我們可以將A-Frame捆綁到我們的應用程序中。例如,使用Browserify或Webpack:

require('aframe');
 

如果使用npm,則可以使用角度,A-Frame的命令行界面。 angle可以使用單個命令初始化場景模板:

npm install -g angle && angle initscene
 

AR入門

要在Web上創建AR應用程序,您需要添加名為AR.js的新庫。首先加載A幀,然後加載AR.js.

Newt你必須使用添加了artoolkit -attribute的A-frames a-scene -tag來設置你的場景。 sourceType 必須是您的網絡攝像頭。使用此功能也支持智能手機的字體相機。

a-marker-camera -tag標記記錄屏幕內代表圖像的圖像。在這種情況下,它是marker.png 。當相機檢測到此標記時,該框將顯示在標記上。

您可以在下面找到示例代碼:

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>
    THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'
</script>
<body>

    <a-scene artoolkit='sourceType: webcam;'>
        <a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
        <a-marker-camera preset='marker.png'></a-marker-camera>
    </a-scene>

</body>