開源框架 A-Frame:只要增加一行代碼就可以製作VR網頁

2021-01-08 雷鋒網

近日，Mozilla旗下的VR研究團隊MozVR推出開源框架 A-Frame，幫助開發者更容易完成VR網頁的製作，而無需花時間學習複雜的3D繪圖標準WebGL。

具體來說，開發者只要增加以下這行代碼，然後通過使用熟悉的HTML代碼，便可以集成VR網頁的基本組件。如下：

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

根據 MozVR 團隊的介紹，A-Frame框架在WebGL協議下運行。這將意味著，通過A-Frame打造的網頁能夠跨平臺使用，包括電腦手機。目前，A-Frame支持Oculus Rift DK2和Cardboard類的手機VR設備。MozVR 團隊表示，日後A-Frame將會對更多的設備提供支持，比如HTC Vive。

對此，MozVR 團隊的高管Joshua  Carpenter表示，A-Frame的價值在於降低VR網頁的開發難度。

「大多數網頁開發者會因為複雜的WebGL而無法開展VR網頁的開發工作。但現在只要使用A-Frame，一切就會變得很簡單。只要在他們原本的代碼上加上一行就可以進行VR網頁的開發了」，Carpenter說。

除此之外，Carpenter還說了一句頗為感人的話。他說，「如果我們關心web而且認為web技術非常酷炫，我們不應該等待VR 行業成熟之後再研究VR網頁，因為這一過程可能會長達5年之久，我們必須籌劃未來。」

目前，關於A-Frame的更多資料，比如使用指南、案例模型等已經發布。感興趣的同學可以到這裡詳細了解或者下載。

via：engadget、roadtovr、aframe

雷鋒網原創文章，未經授權禁止轉載。詳情見轉載須知。

相關焦點

  • 谷歌推出VR View開發工具,只要幾行代碼就能製作VR內容
    這將意味著在不久之後，Cardboard將可以利用iPhone體驗VR。值得一提的是，iOS版SDK擁有的功能將與Android版保持一致。對於已經擁有500萬出貨量的Cardboard來說，iOS版SDK這個「入侵」蘋果的舉動無疑是想進一步霸佔市場。
  • Mozilla 開源 web 虛擬實境框架 A-Frame
    A-Frame 是 Mozilla 開源的網頁虛擬實境體驗（ WebVR ）框架，可用於桌面、iPhone（即將支持安卓）以及 Oculus
  • 網頁製作常用的六則代碼技巧
    正在閱讀：網頁製作常用的六則代碼技巧網頁製作常用的六則代碼技巧2007-09-19 09:07出處：作者：佚名　　在網頁裡把SWF文件設置為背景透明即可，具體做法：DW中，在SWF文件的屬性面板中，點parameters，添加參數wmode，值選擇transparent;或者直接修改網頁的代碼，在標誌SWF文件屬性的代碼中添加：　　<param name="wmode" value="transparent">
  • Jeasyframe 開源框架 V1.X Final 版發布
    產品介紹:Jeasyframe開源框架是基於SSH框架開發的一款開源框架,框架集成了公司、部門、職位、用戶、角色、菜單、權限模型的軟體開發框架，另外Jeasyframe集成了很多解決方案
  • 可以用一行JS代碼將PC網站移動化的「雲適配」開源跨屏前端開發...
    我們之前報導過的「雲適配」是一家可以用一行JS代碼將PC網站移動化的技術公司。在他們用一行代碼做適配的過程中，積累了一套跨屏的前端常用網頁組件，而最近，他們想把這套組件開源出來，讓前端開發者都可以免費使用。
  • Mozilla開源了VR框架A-Frame VR館
    Mozilla創建並開源了A-Frame，這是一個用於在桌面瀏覽器、智慧型手機和Oculus Rift上創建VR場景的框架。A-Frame是一個在瀏覽器中創建VR體驗的開源框架。該框架由Mozilla的MozVR團隊創建和開發。
  • HTML5：網頁如何播放VR視頻？
    VR即虛擬實境，VR視頻又名全景視頻，是指使用全景攝像機拍攝的，觀看時可以自由變換視角的視頻。戴上VR眼鏡，隨著頭部轉動看到的圖像也隨之變化，仿佛身處一個虛擬的世界中。網頁如何播放VR視頻？"開放、平等、協作、分享"是網際網路精神，Web是VR內容最好的傳播渠道。VR視頻能豐富網頁的表現形式，提高用戶的參與感。
  • 翻譯 | 使用A-Frame打造WebVR版《我的世界》
    只用使用一行 HTML（）即可搞定 3D 和 VR 樣板代碼搭建，包括：canvas、場景、渲染器、渲染循環、攝像機以及 raycaster。然後，我們可以通過使用添加子元素的方式來為場景添加對象。無需構建，就只是一個簡單的、可隨意拷貝粘貼的 HTML 文件。
  • 11.6k stars，用於構建虛擬實境體驗的web框架——aframe.js
    介紹aframe是一個用於構建虛擬實境（VR）體驗的web框架，用HTML和模型組件製作WebVRgithubhttps://github.com/aframevr/aframe功能特性以下功能特性來自於官方介紹簡化虛擬實境通過添加<a-scene>， A-Frame可以處理跨平臺運行所需的3D和WebVR
  • Selenium自動化測試——Frame框架定位
    Frame是HTML框架結構常用的一種布局格式，共有三種形式：frameset、frame及iframe。1、Frameset：將HTML頁面分割，可以嵌入多個HTML源碼文件，實現單個頁面顯示不同HTML頁面效果，不能嵌入在BODY標籤中。
  • 備戰未來,6 款優秀的 AR/VR 開源庫推薦
    如果說去年是「 VR 元年」，那今年則可以稱得上是 AR 的爆發年。
  • 只要一行代碼，實現五種 CSS 經典布局
    下面我會介紹5個經典布局，只要掌握了它們，就能應對絕大多數常規頁面。這幾個布局都是自適應的，自動適配桌面設備和行動裝置。代碼實現很簡單，核心代碼只有一行，有很大的學習價值，內容也很實用。我會用到 CSS 的 Flex 語法[1]和 Grid 語法[2]，不過只用到一點點，不熟悉的朋友可以先看看教程連結，熟悉一下基本概念。
  • 1行代碼實現Python數據分析:圖表美觀清晰,自帶對比功能丨開源
    這是一個基於Python編寫的數據分析軟體，只要掌握3種函數用法，一行Python代碼就能實現數據集可視化、分析與比較。我們以Titanic數據集為例，輸入一行代碼：一個1080p的清晰網頁界面就出現在了眼前。
  • 無需管理員權限也能安裝IE插件Chrome Frame
    谷歌瀏覽器內嵌框架（Chrome Frame）是2010年9月Google為舊版IE發布的一款開源插件，不論是較快的JavaScript引擎，還是對HTML5離線功能、canvas標籤等現代化Web技術的支持，亦或是CSS/Layout處理，Chrome Frame都能幫你在IE中實現，而且不需要額外代碼或是測試不同的瀏覽器版本。
  • 34個最優秀好用的Python開源框架
    人工智慧和深度學習的熱潮極大的帶動了Python的發展，迅速在Python生態圈中催生了大批的涉及各個方面的優秀Python開源框架，今天小編就帶你回顧下2018年度最優秀好用的Python開源框架。下面是從2018年中近10000個python開源框架中評價整理的34個最為好用的開源框架，它們細分可以分為Python Toolkit、Web、Terminal、Code Editor、Debugging、complier、Data Related、Chart8類，分布情況如下圖：Python ToolKitPipenv - 人類的Python開發工作流程
  • 網頁3D展示-WebGL開源框架的選擇
    最近項目需要在web平臺實現三維效果的展示（在網頁繪製三維輪廓、點線面等幾何對象、外部3D模型的顯示）以及基本的三維場景交互（滑鼠事件、縮放平移、視角切換等）。從網上搜集資料找到以下幾個WebGL框架（Three.js、babylon.js），基本能滿足需求。
  • 用 Bootstrap4 製作響應式網頁一(安裝框架)
    bootstrap 是全球最受歡迎的前端開源工具庫，它支持 Sass 變量和 mixin、響應式柵格系統、自帶大量組件和眾多強大的 javascript 插件。本文將以教程文檔的方式演示一下如何用 Bootstrap 前端框架製作響應式網頁(適用pc、平板、手機一體式訪問)。此部分是引用必須的框架文件我們在文檔head部分必須先引用框架的核心文件，包括js和css兩部分。
  • 實用篇 | 34 個最火的 Python 開源框架
    我們從近 10000 個 Python 開源框架中評價整理的 34 個最為好用的開源框架，它們細分可以分為 Python Toolkit、Web、Terminal、Code Editor、Debugging、complier、Data Related、Chart8 類，分布情況如下圖：
  • Google出品 IE插件Chrome Frame正式發布
    去年9月份的時候Google首次介紹了為舊版IE開發的一款開源插件Chrome Frame（瀏覽器內嵌框架），這款插件能為舊版IE用戶帶來各種新的Web技術，比如HTML5。近日，Google宣布，Chrome Frame穩定版已經完成，可以進行日常使用。
  • Web前端學習第15課 網頁中的關於顯示內容的其他標標籤
    行內元素標籤：在瀏覽器中顯示時，行內元素標籤在一行內顯示，它不會換行顯示。它們常用於標記塊級標籤中的一部分內容。例如，下面的段落中的標籤<a>和<b>中的內容在一行內顯示。你每使用一次div標籤，頁面就增加了一個區域。它沒有實際意義，只是其他標籤的容器，它的作用就是進行網頁布局。你放入<body>中的所有顯示的標籤都可以放在div中。