Simple Steps To Integrate AR Model In Web HTML

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.

Topics

Create a Simple Web Page
Adding Required Scripts Using Three JS & 3D Model
Export Files glb/gltf (Android) and usdz (iPhone) From Design Tools
Tools and Technologies Used
Demo Link

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

<!-- 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>

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

<!-- 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>

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

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

Create environment, Texture files, and Export 3D model from design tools ( i.e. MAYA, Blender, etc… )
Do changes if required in parameters for changing model position for displaying on front end.
Eg. HTML & CSS

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
- http://graphics.pixar.com/usd/docs/Usdz-File-Format-Specification.html
- https://developer.apple.com/videos/play/wwdc2019/602/

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.

Written By,

Vishal Kacha

Jr. Web Designer at Yudiz Solutions Pvt. Ltd