Groove Jones worked with our long-time client, Toyota Motor North America (TMNA), to create a stunning WebGL immersive experience that allows customers to explore and view the new Mirai fuel cell electric vehicle (FCEV). What makes FCEVs unique is that they use hydrogen to produce electricity via a fuel cell to power the vehicle.
The initiative highlights the car’s sophisticated design and features, providing an interactive platform for potential customers to delve into the Mirai’s world in a novel and educational manner.
The project’s primary focus was creating a user-friendly WebGL site designed to let users interactively explore the exterior and interior of the Toyota Mirai in detail. Groove Jones developed detailed 3D models of both the XLE and Limited editions, focusing on delivering high-quality visuals and interactive elements to draw users into the Mirai experience.
By integrating interactive hotspots within the 3D environment, the project aimed to offer educational marketing content engagingly, driving user engagement while imparting valuable information about the Mirai.
The site highlights the features of the Executive Luxury Edition (XLE) and the Limited Edition (Limited).
XLE Model
Limited Model
Throughout this project, the Groove Jones team leveraged their expertise to address key aspects of the Toyota Mirai’s digital showcase. Recognizing the importance of high-resolution 3D models for interactive exploration without compromising web performance, our team crafted optimized 3D models of the Mirai’s exterior and interior.
This approach offered users various customization options, including six different colors and wheel options for the exterior. It also included a 360-degree panoramic view of the interior with various color and accent options, blending detailed visualization with user engagement.
To enrich the interactive exploration experience, Groove Jones integrated content by strategically placing up to 10 interactive hotspots on the 3D models.
When clicked, these hotspots show pop-up details. This included animated camera controls that zoomed into the highlighted or activated feature.
Environmental Controls
The site included a control to switch between the view of the daytime environment and a nighttime starlit sky environment.
At night, the headlights illuminate.
Interior View and Dynamic Controls
Once inside the vehicle, customers can view the interior in detail in full 360º views.
Hotspots throughout the interior activated details on the trim features.
Customers can control the different material and color options by tapping the color swatches on the screen.
Powertrain X-Ray View
The new Mirai is Toyota’s hydrogen-fueled vehicle. This site demonstrates the technical sophistication of the Mirai’s drivetrain in a visually appealing and understandable way. An innovative X-ray view feature was developed, allowing users to see through the vehicle and observe the drivetrain’s functionality. The feature was enhanced with animated effects and supported by hotspots providing in-depth content on the technology.
This includes details of the vehicles, Fuel Cell Stack, location of the Hydrogen Tanks, Regenerative Brakes, and Electric Motor.
WebGL Provides Elegant Desktop and Mobile Friendly Web Interactivity
The site was designed using WebGL. WebGL allows the Groove Jones team to create a site that leverages 3D visualization in dynamic ways, allowing users to interact and actively engage with the content. It is desktop and mobile web-friendly, allowing it to reach everyone, regardless of their device.
The site is a digital showroom for the Toyota Mirai, setting a new benchmark for online car showrooms. The interactive 3D models, educational hotspots, and the drivetrain X-ray view enriched the user experience and served as an effective tool for educating customers about Mirai’s cutting-edge features and design. Visit the site here – https://toyotamirai.groove-tech.com/
Award-Winning Production
PLATINUM 2024 MUSE CREATIVE AWARDS
CATEGORY: WEBSITE – AUTOMOTIVE
GOLD – 2025 HORIZON INTERACTIVE AWARDS
CATEGORY: WEBSITES – CONSUMER INFORMATION
