Back to the blog
Technology

Create immersive 3D Virtual Trade show Experiences with Three.js

author image

Nilabjo

Date posted: June 23, 2021

When the pandemic hit, a wrench was thrown into the experiential marketing plans of several enterprises. Being an established digital partner, we got approached by product marketing teams to find a quick digital replacement to re-engage the customer base.

Our product team and technical architecture worked hand in hand with a few of our customers to create a product and technology roadmap that will get our customers up and running in the shortest possible time.

The crux of the plan was to leverage the 3D renders of the existing physical booths to build an interactive 3D experience. This idea was immediately approved by one of our medical clients. We went ahead to plan an event that involved digitizing 3D experiences for 3 of their brands.

Meanwhile, our R&D (Aka Hashout Labs) department has successfully created POCs using three.js and UNITY. Not knowing the device configuration of the clients, we had to go with Three.js so that the experience is very light.

As a result, we had successfully digitized a Physical Tradeshow using a seamless flow involving,

  1. Landing/Registration Page with Agenda and Teaser Video
  2. 3D Experience with,

    • Free navigation
    • Add to bag feature for taking away digital collaterals
    • Human touchpoints through chat and email
  3. Exit experience

As a result, our client had over 1000 registrations (this is 3X a physical tradeshow) at half of the cost.

In the words of our customers,

“This was such a special project because we knew what we wanted—a trade show-type experience in a virtual platform, but we weren’t sure how to make it happen. We talked to the Hashout team and they knew immediately how they would execute on the project because they had created an experience that had similar functionality to what we were looking to do.”

For those technical minds, we have got some sneak peek into the technology and process. Where did we start the build? A gltf model of the entire trade show booth with,

  • All the elements like tables, objects, products, and lights
  • Metadata of every product and relevant links for brochures and other resources.
  • User experience flow for the scene

Tech stack and Best Practices

  • Mail frontend library: three.js with 3d on the web.
  • Core Platform: A custom framework built on vanilla javascript.
  • Assets, javascript, HTML, and scss files bundled using parcel.
  • Hosting: The builds are deployed on azure storage containers and cached using cdns for fast delivery.
  • Continuous integration and development ensure there is zero downtime while pushing updates.

The Experience

Using the .gltf and techstack, we created a core platform that included the following features/components. This helped us quickly expand the platform to new experiences/brands.

  • Collision detection
  • Load objects into the scene
  • Authentication
  • User navigation
  • 3d interactions including viewing product details and videos
  • Use draco for 3d data compression
  • Add lighting to the scene as per the configuration
  • Add to bag feature
  • Ask a question
  • Light version of the entire app
  • Book an appointment

We also ensured that the core platform was optimised for the best performance on almost all browsers across platforms and downloads bare minimum assets for a fast user experience. We avoided the use of a third-party physics library which saved us from adding precious MBs to the asset overhead.

Light version (Plan B)

The light version of the tradeshow was powered by images and interactions placed on the images. This was provided as a fallback option for users with light machines and low bandwidth internet connections. This option was made available through quick toggle options within the experience and in the loading screen. It has all the checks and balances like the 3d experience in terms of security and features.

Want to maximize attendance levels and generate vast numbers of leads? Let Hashout design and develop your next virtual event.

Browse all categories