当前位置: 首页 > 工具软件 > AR.js > 使用案例 >

AR.js专题-入门例子

谢修真
2023-12-01

AR.js特性介绍

非常快:即使在旧手机上它也能高效运行

基于Web:这是一个纯Web解决方案,因此无需安装。 完整的javascript基于three.js + jsartoolkit5

开源:它是完全开源的,免费

标准:适用于任何带有webGL和webRTC的手机

   

AR.js主要基于两个开源项目:three.jsjsartoolkit5,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

https://192.168.31.153:9092/G/FileServer/OpenProject/javascript/AR.js

/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

转载于:https://www.cnblogs.com/zhen-android/p/9484886.html

 类似资料: