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