150行JavaScript代碼實現增強現實

Arno 發布于2019-08-23 14:44 / 3553人閱讀

摘要：隨著隨身電子產品運算能力的提升，預期增強現實的用途將會越來越廣。本文介紹使用開源框架實現的增強現實的例子。點擊允許用手機上的攝像頭掃描這張圖片神奇的事情就發生了。

增強現實技術（Augmented Reality，簡稱 AR），是一種實時地計算攝影機影像的位置及角度并加上相應圖像、視頻、3D模型的技術，這種技術的目標是在屏幕上把虛擬世界套在現實世界并進行互動。這種技術1990年提出。隨著隨身電子產品CPU運算能力的提升，預期增強現實的用途將會越來越廣。

本文介紹使用JavaScript開源框架AR.js實現的增強現實的Hello World例子。

先看效果：

首先在手機瀏覽器里打開我部署在github page上的這個demo應用：

https://i042416.github.io/FioriODataTestTool2014/WebContent/098_ar.html

我用的是Android手機安裝的Chrome瀏覽器。

打開網頁，會提示你是否允許這個網頁應用訪問您的手機攝像頭。點擊允許：

用手機上的攝像頭掃描這張圖片：

神奇的事情就發生了。您會看到，通過手機攝像頭望過去，手機屏幕里會出現一個新的不斷滾動的3D物體，如下圖所示。

下面具體介紹這個最簡單的例子是怎么開發出來的。

所有的源代碼在我的github上：

https://github.com/i042416/FioriODataTestTool2014/tree/master/WebContent/ar

新建一個html文件，把下列150行代碼粘貼進去，然后在服務器上運行，使用之前描述的步驟即可進行AR測試：

當然，這個效果來自大神jeromeetienne開源的AR.js:

https://github.com/jeromeetienne/AR.js/

當然大神自己也很謙虛地提到，他這個開源的增強現實框架也是建立在巨人的肩膀上開發的：比如其中3D效果的繪制，使用到了另一個開源框架three.js:

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

云服務器 GPU云服務器 webrtc增強現實 webrtc 增強現實遠程協助 java實現行增加代碼行數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101065.html

ES6系列文章 Destructuring

摘要：解構是很重要的一個部分。解構代碼如下上面的代碼表示聲明兩個變量然后。實際業務中長方形的是不能沒有值的。都算正常值的范疇。解構進階解構時同時使用重命名和設置默認值的語法。若有，若沒有屬性，那么將賦值為。 Destructuring解構是ES6很重要的一個部分。和箭頭函數、let、const 同等地位，解構可能是你日常用到最多的語法之一了。解構是什么意思呢？它是js 表達式，允許我們從數組...

JiaXinYi 2019-08-21 16:46 評論0 收藏0
Web 前端中的增強現實（AR）開發技術

摘要：增強現實以下簡稱浪潮正滾滾而來，瀏覽器作為人們最唾手可得的人機交互終端，正在大力發展技術。目前年底前端要想實現，都是靠的視頻透視式技術。但這兩個都是移動的，于是谷歌的團隊提供了和兩個庫，以便開發者能用技術來基于和開發，從而實現。本文作者 GeekPlux，博客地址：http://geekplux.com/2018/01/18/augmented-reality-development...

Jochen 2019-08-22 17:18 評論0 收藏0