国产免费观看青青草原网站_久久精品视频色悠悠_影音先锋激情5566_日本一區二區三區免費高清在線_麻豆精品一区综合av_丰满的大屁股一区二区_男女啪啪免费网站_草莓视频app在线观看下载_午夜寂寞少妇AA片_混乱的生物课月老师后续视频

 
您現(xiàn)在的位置:首頁 ? 知識庫 ? 軟件開發(fā) ? AR/VR開發(fā) AR/VR開發(fā)
AR.js 初探
發(fā)布日期:2018-03-16

寫之前說幾句,以下示例和參考都是github上的開源作品,小編只是分享在使用過程中的踩坑和開發(fā)心得。本文適用于小白,由于例子中可能需要使用到shell命令,小編的電腦操作系統(tǒng)是windows 7,如果是mac請自行轉(zhuǎn)換為對應(yīng)的命令行。

AR技術(shù)(增強現(xiàn)實技術(shù)Augmented Reality,簡稱 AR),AR技術(shù)在Native中已經(jīng)興起了,并且市場上有許多成功的APP,但是對于JavaScript怎么來玩轉(zhuǎn)AR呢?下面我來簡單的給大家演示兩個不同版本,不同場景的AR小例子。

1.首先需要先到github上搜索ar.js,如下圖,有2.8K star的就是了。

目錄結(jié)構(gòu)如下,大家可以download zip,或者git clone下來

咱們的例子主要在這個開源庫上更改,它的一級目錄,aframe data three.js webvr-polyfill,一看就很清晰了,今天咱們單刀直入,只看three.js部分,當然也要依賴于data目錄里的數(shù)據(jù)。

事先準備,為了以后的靈活擴展,建議大家下載一份最新的three.js源碼,里面有完整的例子和源碼可以借鑒。

把項目download下來以后,需要部署到web服務(wù)器上,然后運行一下里面的例子,下面我以dev.html舉例。目錄結(jié)構(gòu)如下:

這個頁面比較簡潔,不到300行的代碼,咱們需要關(guān)注兩塊內(nèi)容,就可以完成對這個頁面例子的改動。

這幾行代碼什么意思呢,就是一個匹配的規(guī)則,匹配的文件是data目錄中的Market標識,說白了就是用讓攝像頭識別這個標記,官方示例給的標記是patt.hiro,這個標記的來源圖片對應(yīng)著data目錄中的images/hiro.png 這張圖,怎么用這張圖來生成patt.hiro這個標記呢,這時我們需要使用一個SDK工具,微小輕量級的,大家別擔心是很重的安裝包。這個工具叫artoolkit,就是AR工具箱,進入官網(wǎng)以后點download下載,我選擇的是這個

安裝完成以后,進入到D:\Program Files (x86)\ARToolKit5\bin 目錄下,接下來我們就要自定義一個標記了,這里的標記是傳統(tǒng)的長方形標記,第一代market,稍后會增加自然圖片的market,這里第一代market我是用div畫的,具體的效果如下:

最外層的邊框 最好為黑白色,這個是官方的文檔上建議的 參考鏈接market,然后呢把這個效果截圖保存到我們剛才下載的SDK D:\Program Files (x86)\ARToolKit5\bin\image下,沒有image目錄就新建一個,用cmdD:\Program Files (x86)\ARToolKit5\bin目錄,運行mk_patt.exe

會彈出相機的配置選項,默認的確定就行,然后相機啟動以后,把我們剛才生成的圖片,對準相機然后相機識別以后會出現(xiàn)紅綠色邊框線,并且出現(xiàn)左上角識別的文字,這時請注意文字的方向是否正確。


然后點擊鼠標左鍵,回到命令行,輸入文件名稱patt.td,然后再當前的Bin目錄下找到該文件

回到AR.js-master項目中,打開data/multi/目錄把剛生成的標識文件放進去,接下來回到three.js/examples/dev.html中,在chrome中打開該頁面,這里有個坑,如果是外網(wǎng)想訪問攝像機,必須走https協(xié)議,下面是我web服務(wù)的url地址:

127.0.0.1:18080/AR.js-m

效果如下:

這里聲明必須使用兩臺設(shè)備,我的電腦打開我開發(fā)的網(wǎng)頁,手機上保存的是我們剛才生成的market!也可以使用兩臺手機,最好是比較新的android機器,支持webrtc的設(shè)備

接下來如果例子運行成功以后,大家會發(fā)現(xiàn)我的3D模型和官方的例子并不一致,模型怎么替換呢,這就涉及到前面我說的第二處注意的地方,替換模型,并不需要改大量的源碼,只需要注釋掉一小部分就行。

我注釋掉的部分是官方的模型運行的代碼。上面部分則是three.js中的源碼,我這是在紅框的地方更改一下模型的定位。我這個模型大家可以直接參考three.js源碼中three.js-r82\examples\webgl_loader_collada.html 這個html文件,可以直接運行的例子,將如下代碼替換掉dev.html中我注釋的部分即可,具體請參考截圖,并不是完全替換。

var loader = new THREE.ColladaLoader();
 
loader.options.convertUpAxis = true;
loader.load( './models/collada/monster/monster.dae', function ( collada ) {
       dae = collada.scene;
       dae.traverse( function ( child ) {
       if ( child instanceof THREE.SkinnedMesh ) {
var animation = new THREE.Animation( child, child.geometry.animation );
                  animation.play();
               }
             });
             dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
            dae.updateMatrix();
            init();
            animate();
});
 

還需要引入依賴的js文件,只需要把這幾個文件增加到AR.js-master項目中即可,three.js已經(jīng)有了,余下的拷過去就行。

最后一個自定義標識的ar h5小程序就生成了,大家可以替換自己想用的3D模型,也可以條形碼生成market,也可以將標識打印到A4紙上,用手機打開url掉出照相機,對著該market一掃,就出現(xiàn)了增強現(xiàn)實的模型,很贊吧!

接下來說說自然圖片的標識怎么生成:

先使用SDK工具進入到D:\Program Files (x86)\ARToolKit5\bin目錄,我在這新建一個image文件夾,里面拷了一張.jpg的圖片,然后用命令行打開這級目錄:

直接enter 使用默認值,到這一步需要輸入分辨率

默認是220,然后再輸入一個區(qū)間,按照提示輸入6220

然后就會采集圖片的坐標點

收集完成以后會生成如下文件

我們將生成的NTF文件拷入到AR.js-master項目中data/dataNTF中,我這里新建了一個目錄叫dayan的文件夾,并將文件粘貼進去,標識生成以后需要做測試了,怎么測試呢,找到如圖的nft_threejs.html,這是官方用來測試自然圖片的demo.

找到加載標識的地方,這里需要替換一下路徑,官方的路徑在web服務(wù)上會有問題

這里需要注釋一下這個function回調(diào)里的代碼,


替換成如下代碼:

var markerRoot = arController.createThreeNFTMarker(markerId);
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load(location_path+ 'three.js/examples/models/dae/monster.dae', function (collada) {
       dae = collada.scene;
       dae.traverse( function (child) {
if (child instanceof THREE.SkinnedMesh) {
       var animation = new THREE.Animation( child, child.geometry.animation );
       animation.play();
    }
});
       dae.position.z = 40;
       dae.position.x = 80;
       dae.position.y = 80;
       dae.rotation.set( 0,Math.PI/2,Math.PI/2);
       dae.updateMatrix();
       markerRoot.add( dae );
       arScene.scene.add(markerRoot);    
 
});

最后代碼如下圖,

然后我們來跑一下我們的自然圖片例子。效果如下

如果大家需要調(diào)整模型的位置和角度,請更改positionrotation的值,涉及到一定的數(shù)學原理,不會的自己調(diào)調(diào)找感覺。

最后把我制作的market圖片貼一下


參考文檔:

Creating and Training Traditional Template Square Markers
Training ARToolKit Natural Feature Tracking (NFT) to Recognize and Track an Image
NFT Utilities for ARToolKit

demo list:

測試AR例子
自然圖片識別例子

github源碼:
dragonHu/ar_test_demo

都是國外的網(wǎng)站,打開可能比較慢,然后大家閱讀英文文檔吃力的,可以使用google翻譯 翻譯一下,我這只是在AR.js上初步研究了一下,并沒有深入,希望大家多提意見交流,我也實現(xiàn)了播放視頻的例子,大家可以參考demo列表中的例子,我就不貼代碼了。為了精準的展示例子,請大家把攝像頭對準Market

目前H5 AR還是有很多壁壘和坑的,文檔也相對較少,涉及的面比較多,設(shè)備性能也是問題,但是對于新技術(shù)的探索還是很有趣的,希望我這篇文章能幫到一些開發(fā)人員。

  • 1.公司登記注冊于2003年1月27日,清遠市桑達電子網(wǎng)絡(luò)媒體有限公司
    2.公司2006年起成為清遠市政府定點協(xié)議供貨商,電子采購供貨商
    3.公司2007年被清遠市相關(guān)政府部門評為安防行業(yè)狀元
    4.公司2007年起成為長城電腦清遠如意服務(wù)站(SP368)
    5.公司2007年承建清遠市橫河路口電子警察工程,開創(chuàng)清遠電子警察先河。
  • 6.公司2007年起成為IBM合作伙伴、公司2010年底成為金蝶軟件清遠金牌代理(伙伴編號:30030013)
    7.公司組團隊參加南方都市報組織的創(chuàng)富評選,獲廣東80強。公司申請多項軟件著作權(quán)、專利權(quán)
    8.2016年起公司成為粵東西北地區(qū)為數(shù)不多的雙軟企業(yè),確立“讓軟件驅(qū)動世界,讓智能改變生活!"企業(yè)理想
    9.2016-01-29更名為廣東互動電子網(wǎng)絡(luò)媒體有限公司
    10.2021-01-13更名為廣東互動電子有限公司
  • 投資合作咨詢熱線電話:0763-3391888 3323588
  • 做一個負責任的百年企業(yè)! 天行健,君子以自強不息;地勢坤,君子以厚德載物;
    為用戶創(chuàng)造價值! 讓軟件驅(qū)動世界; 讓智能改變生活; 超越顧客期望,幫助顧客成功;
    對客戶負責,對員工負責,對企業(yè)命運負責!幫助支持公司的客戶成功;幫助忠誠于公司的員工成功!
  • 聯(lián)系電話:0763-3391888 3323588 3318977
    服務(wù)熱線:18023314222 QQ:529623964
  • 工作QQ:2501204690 商務(wù)QQ: 602045550
    投資及業(yè)務(wù)投訴QQ: 529623964
    微信:小米哥 微信號:qysed3391888
    騰訊微博:桑達網(wǎng)絡(luò)-基石與起點
  • E-MAIL:222#QYSED.CN ok3391888#163.com (請用@替換#)
在線客服
  • 系統(tǒng)集成咨詢
    點擊這里給我發(fā)消息
  • 網(wǎng)站\微信\軟件咨詢
    點擊這里給我發(fā)消息
  • 售后服務(wù)
    點擊這里給我發(fā)消息
  • 投資合作
    點擊這里給我發(fā)消息