<dd id="wrnvd"><center id="wrnvd"><meter id="wrnvd"></meter></center></dd>

  • <ruby id="wrnvd"></ruby>

    1. <track id="wrnvd"><i id="wrnvd"></i></track>

      A-Frame中文教程

      什么是 A-Frame?

      :a:-Frame 是一個用來構建虛擬現實(VR)應用的網頁開發框架。由WebVR的發起人Mozilla VR 團隊所開發,是當下用來開發WebVR內容主流技術方案。WebVR是一個完全開源的項目,已成長為領先的VR社區

      A-Frame基于HTML,容易上手。但是A-Frame不僅僅是一個3D場景渲染引擎或者一個標記語言。其核心思想是基于Three.js來提供一個聲明式、可擴展以及組件化的編程結構。

      A-Frame支持主流VR頭顯如Vive, Rift, Daydream, GearVR,
      Cardboard, 甚至可被用于增強現實(AR)。雖然A-Frame支持全譜,A-Frame的目標是定義具有位置跟蹤和操控的完全身臨其境和交互式VR體驗,超出基本的360° 內容呈現。Mozilla VR團隊正在使用A-Frame構建虛擬實境(Metaverse)項目的基礎。
      Metaverse由meta和verse組成,meta表示超越,verse表示現實世界,合起來就寓意超現實,技術上是VR、AR和移動互聯網的融合。

      開始使用

      A-Frame 的開發方式其實就是使用普通的HTML文件,而無需安裝任何插件。你可以使用踏得網在線開發工具來快速構建一個可在線部署和訪問的應用,或者使用Sublime Text離線工具來編寫代碼然后自行發布到網上。如果是使用前者,我們需要在第三方庫中選擇A-Frame 0.5.0,踏得網在線開發工具會自動幫您在代碼中引入A-Frame框架;如果是后者,我們需要在HTML代碼的元素中手動引入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>

      特性

      :eyeglasses: 簡化VR制作: 只需要引入 <script> 標簽 和 <a-scene>.
      A-Frame 將自動生成3D渲染的樣板代碼,VR相關設置和缺省的交互控制。不需要安裝任何東西也無需編譯構建。

      :heart: 聲明式HTML: HTML很容易閱讀,理解和
      復制粘貼。基于HTML,A-Frame使得每個人都可以輕松訪問:
      網站開發者,虛擬現實愛好者,藝術家,設計師,教育家,制造商以及孩子們.

      :globe_with_meridians: 跨平臺VR: 構建能兼容主流頭顯設備的VR應用程序,如HTC Vive,
      Rift, Daydream, GearVR, 和 谷歌Cardboard,乃至在普通電腦和手機上運行。

      :electric_plug: 實體-組件架構: A-Frame 基于強大的
      three.js 框架, 同時提供聲明式、組件化、可復用的
      實體組件(entity-component)結構。HTML只是冰山的一角,
      開發者可以自由的使用JavaScript、DOM API,Three.js,WebVR,和
      WebGL。

      :zap: 高性能: A-Frame 從底層對WebVR做了優化,盡管A-Frame使用DOM,但其元素并不接觸瀏覽器的布局引擎。3D
      對象的更新全部在低開銷內存中通過單個 requestAnimationFrame 來調用,甚至能夠像本地應用一樣來運行 (90+ FPS)。

      :hammer: 工具無關性: 由于是構建在HTML之上,所以 A-Frame 和大多數開發庫、框架和工具如
      React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery 兼容。

      :mag: 可視化檢測工具: A-Frame 提供一個便捷的內置3D可視化檢測工具。打開任意的A-Frame場景,敲擊 <ctrl> + <alt> + i 組合鍵,將切換到3D元素檢測模式。

      Inspector

      :package: 注冊表: 采用開發者發布的強大組件并直接在HTML文檔中使用,和Unity的資源商店類似,
      A-Frame Registry
      收集并組織這些資源以便開發者發現和復用。

      :runner: 組件: A-Frame底層運行著核心組件如幾何模型(geometries), 材料(materials), 光線(lights), 動畫(animations), 模式(models), 光線投射(raycasters), 陰影(shadows),
      定位音頻(positional audio), 文本(text), 和 Vive / Touch / Daydream / GearVR / Cardboard 控制。還有更多社區貢獻的組件如:粒子系統particle systems,
      物理系統physics, 多人模式multiuser, 海洋oceans, 山脈mountains, 語音識別speech recognition, 運動捕捉motion capture,
      瞬移teleportation, 人手super hands, 以及增強現實augmented reality

      在開始之前,可以先看看別人已經做了什么:
      Weekly Blog
      awesome-aframe。A-Frame的用戶包括華盛頓郵報、國際特赦組織、谷歌創新實驗室、
      Al Jazeera, NPR, Shopify, iStaging, 和 IDEO。

      當你構建完一些作品后,記得在踏得網在線分享你的項目:)

      開始您WebVR趣味之旅吧!

      插妹妹a片_日本成人A片_黄色无码AV电影_成年人电影网站