Services Tech Notes Technology

How BHSOFT utilized Three.js to build a 3D virtual event booth

The recent pandemic has given a boost to the popularity of 3d virtual event booths. Events such as business conferences, trade shows, and campus admission tours are looking for a solution that doesn’t require face-to-face meetings. That is when 3D virtual booths come in handy.

3D virtual event booths allow vendors and visitors to interact with each other effectively and economically.

At BHSOFT, we have our own solution for web-based virtual trade shows. We are highly experienced with 3D modeling, animation, CMS, and data collection for 3D projects. This article will show how we utilized Three.js and WebGL to create and render a 3D virtual booth for our client.

First of all, let’s discuss why Three.js and WebGL are the perfect combos for building 3D virtual booths.

Benefits of using Three.js to render large quantities of visualizations

Three.js is an easy-to-use, lightweight 3D JavaScript library that helps developers to create and display 3D computer graphics. Rendering is one of the main jobs of the library. Three.js provides 4 main renderers including: <canvas>, <svg>, CSSD and WebGL. WebGL stands out from the crowd thanks to its many helpful features and high performance.

WebGL totally outperforms Canvas and SVG in terms of rendering simple polygons. It is the most perfect technique to render high-level views of very large network visualizations. Depending on the graphics card, WebGL can render from ten to a hundred thousand elements on the screen at the same time with perfect frame rates. 

WebGL not only performs well on different browsers (Chrome, Firefox, Edge, Safari, and derivatives), it can also render a huge number of items on mobile devices thanks to built-in GPU. 

How BHSOFT utilized Three.js in our Virtual Event Booth project

What the client wanted

The client needed to build a virtual event web application where users can find and engage with the right vendors for their event planning. Users can hand-pick the vendor, view event samples with specific themes, and reserve their favorite vendor right on the platform. This helps save time for both vendors and their customers by automating all processes while giving the customer a true experience on a virtual platform. 

How did we do it

Our team worked together to create and define 3D objects exactly as our client wanted. We used 3ds Max to create, design, and modify the 3D objects such as the booths, the personnel, the floors, and furniture. 

The biggest requirement for this project was to make the virtual booth work well on all web browsers. Having a handful of experiences with 3D projects, the BHSOFT team knows what is the best tool: Three.js. What we did with Three.js:

  1. We created a scene
  2. Load all the glTF models
  3. Add lights
  4. Declare a camera position and orientation
  5. Finally, add some interactivity because the booth needs to be interactive

With the help of 3d Max, Blender, and three.js editor, we restructured and assigned attributes for all objects. We were able to easily import 3D models and translate them into glTF files for later rendering. 

Three.js helped us interact with attributes effectively. The library allows developers to easily map color and material with a specific object. The team can quickly modify the furniture and booth color, selecting highlights, hovering over/ selecting events. 

When certain objects intersect with a ray connecting the camera and the mouse position, we added actions. For example, changing the appearance/ material of an object or opening a link in a new tab.

Three.js indeed helped us a lot because we needed to display quite a large number of elements on the screen at the same time. BHSOFT Team specifically chose Three.js for this Virtual Event project because:

  • Three.js is a mature 3D render library
  • The library has support for glb file type and gltf file type (which is now an open standard)
  • Three.js is easier to control and access to 3D model geometry / object
  • Easy to customize 3D model material
  • Provide sufficient interaction for control 3D model
  • Better model integration support

Conclusion

We live in an increasingly connected world and virtual needs will definitely keep expanding. At BHSOFT, we offer you a full package of designing and building your 3D project. We can start with your existing CAD models or we can do it from scratch for you. Contact us via [email protected] or our contact form right away for more details. 

Author

Nguyen Bao Ngoc