1st May 2020

Simple Steps To Integrate AR Model In Web HTML

Wordpress

Written By, Vishal Kacha

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

webar-modal-demo

Add AR Button

This button will be hidden on desktop devices but will be visible on smaller devices which supports AR functionality.
webar-modal-button
webar-modal-preview

Script AR Button

webar-modal-device-code

Note:

Adding Required Script Using Three JS & 3D Model Creation Tools

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.

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… )
    webar-modal-texture-enivronment
  • Do changes if required in parameters for changing model position for displaying on front end.
    webar-modal-position
  • Eg. HTML & CSS
    webar-modal-html-code

Export Files glb/gltf (Android) and usdz (iphone) From Design Tools

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,

Jr. Web Designer at Yudiz Solutions Pvt. Ltd