3D development -AR.js example of the entry

AR.js features introduced

Very fast: even though it can run efficiently on old phone

Based Web: This is a pure Web solution, it requires no installation. Complete javascript based three.js + jsartoolkit5

Open source: It is completely open source, free

Standard: For any phone with a webGL and webRTC

   

AR.js mainly based on two open source projects: three.js and jsartoolkit5 , 3D scene is loaded, a demonstration section is achieved using three.js, Marker track identification is achieved by the jsartoolkit5.

 

AR.js start example

Official examples

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

Local demo

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

Renderings

 

 

Filled pit section

B1. Some browsers open front camera

Key Log:

solution:

navigator.mediaDevices.enumerateDevices().then(function (devices) {     was 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