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