Overview
WebAR is an Augmented Reality Experience in Web Browsers instead of a Mobile App. It provides Web-Based AR experience by using technologies like HTML, WordPress. In simple words, you just need a phone to access it.
Create a Simple Web Page
Add AR Button
This button will be hidden on desktop devices but will be visible on smaller devices which supports AR functionality.
Script AR Button
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!-- AR Kit For Show Button Android and Ios --> <script type="text/javascript"> function enhanceWithARQuickLook() { // enhancement function function addEnhancement(){ var name = "ar-fp"; var elements = document.querySelectorAll("[data-"+name+"]"); function wrap(instance, filepath) { var wrapper = document.createElement("a"); wrapper.setAttribute("href", filepath); wrapper.setAttribute("rel", "ar"); instance.removeAttribute("data-"+name); instance.parentNode.insertBefore(wrapper, instance); wrapper.appendChild(instance); } for ( var i in elements ) if ( elements.hasOwnProperty(i) ) { var instance = elements[i]; wrap( instance, instance.getAttribute("data-"+name) ); } } // check for iOS 12 before adding the enhancement ( iPhone ) var iOS = /iP(hone|od|ad)/.test(navigator.userAgent) && !window.MSStream; if ( iOS ) { var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); version = parseInt(version[1], 10); if ( version >= 12 ) { addEnhancement(); $('.ar-badge').css("display","block"); } } // check for Android 9 ( pie ) and above ( Android ) var android = /android/i.test(navigator.userAgent); // console.log(android); if ( android ) { // if ( false ) { if (parseInt(getAndroidVersion(), 10) >= 9) { $('.android-ar-badge').css("display","block"); } } function getAndroidVersion(ua) { ua = (ua || navigator.userAgent).toLowerCase(); var match = ua.match(/android\s([0-9\.]*)/i); return match ? match[1] : undefined; }; } enhanceWithARQuickLook(); </script> |
Note:
- It works only above the IOS 12 operating system and for android its works above 9(pie). For more info for supported device please visit the shared link.
- https://developers.google.com/ar/discover/supported-devices
Adding Required Script Using Three JS & 3D Model Creation Tools
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
<!-- Three Js Script For Display 3D Model In Webpage --> <script type="text/javascript"> var camera, scene, renderer, pivot; var geometry, material, mesh; var CANVAS_WIDTH = 400; var CANVAS_HEIGHT = 400; init(); animate(); function init() { document.getElementById('loadingBar').textContent = "Loading: 0%"; camera = new THREE.PerspectiveCamera( 70, CANVAS_WIDTH / CANVAS_HEIGHT, 0.01, 150 ); camera.position.set(-5, 25, 15); scene = new THREE.Scene(); //loading manager var manager = new THREE.LoadingManager(); manager.onStart = function ( url, itemsLoaded, itemsTotal ) { console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' ); }; manager.onLoad = function ( ) { console.log( 'Loading complete!'); }; manager.onProgress = function ( url, itemsLoaded, itemsTotal ) { console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' ); var t = (itemsLoaded / itemsTotal * 100); document.getElementById('loadingBar').textContent = "Loading: " + t.toPrecision(2) + "%"; if(t == 100) document.getElementById('loadingBar').remove(); }; manager.onError = function ( url ) { console.log( 'There was an error loading ' + url ); }; const loader2 = new THREE.CubeTextureLoader(manager); const texture2 = loader2.load([ 'http://webprojects.cloud/r&d/ar-model/uploads/px.png', 'http://webprojects.cloud/r&d/ar-model/uploads/nx.png', 'http://webprojects.cloud/r&d/ar-model/uploads/py.png', 'http://webprojects.cloud/r&d/ar-model/uploads/ny.png', 'http://webprojects.cloud/r&d/ar-model/uploads/pz.png', 'http://webprojects.cloud/r&d/ar-model/uploads/nz.png', ]); var light = new THREE.AmbientLight(0xffff00,.2); // soft white light scene.add( light ); // var light = new THREE.PointLight( 0xffffff,1.5); // light.position.set( 0, 20, -1 ); // scene.add( light ); //leather textures const texLoader = new THREE.TextureLoader(manager); var clrMap = texLoader.load( 'http://webprojects.cloud/r&d/ar-model/uploads/Lion_Color.png' ); var mtlMap = texLoader.load( 'http://webprojects.cloud/r&d/ar-model/uploads/Lion_metallic.png' ); var rghMap = texLoader.load( 'http://webprojects.cloud/r&d/ar-model/uploads/Lion_Roughness.png' ); // Instantiate a loader var loader = new THREE.GLTFLoader(manager); // Load a glTF resource loader.load( // resource URL 'http://webprojects.cloud/r&d/ar-model/uploads/LionV2.glb', // called when the resource is loaded function ( gltf ) { var model = gltf.scene; clrMap.flipY = false; model.traverse ( function( o ) { if ( o.isMesh ) { // note: for a multi-material mesh, `o.material` may be an array, // in which case you'd need to set `.map` on each value. // o.material = new THREE.MeshStandardMaterial(); // o.material.roughnessMap = rghMap; // o.material.metalnessMap = mtlMap; o.material.envMap = texture2; o.material.map = clrMap; o.material.emissiveMap=clrMap; o.material.emissiveIntensity=30; // o.material.metalness = 0; // o.material.roughness = 0; } }); model.scale.set(0.1,0.1,0.1); model.position.set(1.5, -1.2, 5.5); model.rotation.set(-0.60, -Math.PI/2, -Math.PI / 12); scene.add( gltf.scene ); // gltf.animations; // Array<THREE.AnimationClip> // gltf.scene; // THREE.Scene // gltf.scenes; // Array<THREE.Scene> // gltf.cameras; // Array<THREE.Camera> // gltf.asset; // Object }, // called while loading is progressing function ( xhr ) { let t = ( xhr.loaded / xhr.total * 100 ); console.log( t + '% object loaded' ); // document.getElementById('loadingBar').textContent = "Loading: " + t.toPrecision(2) + "%"; // if(t == 100) // document.getElementById('loadingBar').remove(); }, // called when loading has errors function ( error ) { console.log( 'An error happened' ); } ); renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } ); console.log(CANVAS_WIDTH); renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT ); renderer.setClearColor( 0xffffff, 0 ); renderer.gammaOutput = true; renderer.gammaFactor = 2.2; renderer.toneMapping = THREE.ReinhardToneMapping; renderer.toneMappingExposure = 2; var scene3d = document.getElementById("scene3d"); scene3d.appendChild(renderer.domElement); renderer.render(scene, camera); var controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.update(); } function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } </script> |
Adding required files through <Script> in tag or before </body> tag. You can add it through the Local Path of your folder or Via CDN Path.
- Three.min.js
- GLTFLoader.js
- Classie.js
- Orbitcontrols.js
Refer the below-attached screenshot for required changes and adding parameters in Script
Export Files glb/gltf (Android) and usdz (iphone) From Design Tools
- Creating 3D model from any software like (Blender/Maya) and export files glb/gltf File ( supported in android devices ) and also abc file ( supported in iPhone Devices )
- Afterward, convert abc file to usdz file from below reference links
Tools and Technologies Used
- HTML/CSS
- Maya/Blender (Creating 3D Model)
Demo Link
- Demo
- Also open in mobile for best AR experience
Conclusion
I hope that this blog might be useful to you. We will shortly come up with an update about “How to Integrate Web AR Model In WordPress” on the same channel, so stay in touch.
NOTE:
If the model does not work in the Local Server or Test Server. Please upload and run it on a live server.