3D開發-AR.js入門例子

AR.js特性介紹

很是快：即便在舊手機上它也能高效運行

基於Web：這是一個純Web解決方案，所以無需安裝。 完整的javascript基於three.js + jsartoolkit5

開源：它是徹底開源的，免費

標準：適用於任何帶有webGL和webRTC的手機

   

AR.js主要基於兩個開源項目：three.js和jsartoolkit5，3D場景加載、演示部分是使用three.js實現，Marker追蹤識別則是由jsartoolkit5實現。

 

AR.js入門示例

官方的例子

https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html

本地demo

/AR.js-1.6.0/data/images/HIRO.jpg /AR.js-1.6.0/three.js/examples/mobile-performance.html

效果圖

 

 

填坑部分

B1.部分瀏覽器打開的是前置攝像頭

關鍵Log:

解決方案：

navigator.mediaDevices.enumerateDevices().then(function (devices) {     var camreass=[];     devices.forEach(function(e){         console.log(e)         if(e.kind=="videoinput")         {             camreass.push(e.deviceId)         }     })     console.log(camreass)     var userMediaConstraints = {         audio: false,         video: {             facingMode: 'environment',             deviceId:camreass[1],             width: {                 ideal: _this.parameters.sourceWidth,                 // min: 1024,                 // max: 1920             },             height: {                 ideal: _this.parameters.sourceHeight,                 // min: 776,                 // max: 1080             }         } }   Ref: https://blog.csdn.net/weixin_37683659/article/details/80954789