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
<!-- 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 Google developers.
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>
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 from usdz file and apple developers.
Demo Link
- Demo
- Also open in mobile for best AR experience
Tools and Technologies Used
- HTML/CSS
- Maya/Blender (Creating 3D Model)
Read: Neumorphism Design 2020
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.
You may also like
WooCommerce: Boost conversion with Pre-Sales activities
Conversion means users who are converted from visitors to customers for your e-commerce website. You...
WooCommerce: Conversion rate
As per today’s situation, about 5+ million e-commerce websites are using the WooCommerce platform. To survive and thrive, you need to know where you stand in this competitive and crowded community. ...
Introducing Twenty Twenty-Two – first default block theme!
The WordPress default theme twenty twenty-two with WordPress...
