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