Expertise
Web development
UX design
Quality assurance
Industry
Transportation
Timeline
3 weeks
The Paris Air Show is the world's largest airshow and aerospace-industry exhibition. Fitzroy Hawk, our long-time creative agency partner, engaged us to develop a specialized 3D microsite aimed at captivating Riyadh Air’s audience with a frictionless smartphone experience.
The biggest challenge was the deadline – 3 weeks for development of the entire microsite experience.
The Paris Air Show is the world's largest airshow and aerospace-industry exhibition. Fitzroy Hawk, our long-time creative agency partner, engaged us to develop a specialized 3D microsite aimed at captivating Riyadh Air’s audience with a frictionless smartphone experience.
The biggest challenge was the deadline – 3 weeks for development of the entire microsite experience.
As a result, “The Future Takes Flight” was successfully launched within the 3-week deadline. After scanning a QR code, attendees were greeted with Riyadh Air's new livery, showcased in an interactive 360-degree model. The display features a live version of Riyadh Air's new livery with a design and colors that reflect Saudi warmth and hospitality.
The new design was easily explorable by clicking on a variety of hotspots, allowing users freedom to delve into the content in two languages – English and Arabic. This project not only met the tight deadline but also delivered a multifaceted digital experience, blending advanced web technologies with creative storytelling.
We embarked on the prototype phase, preparing a mock-up for the client to showcase our capabilities. Simultaneously, we worked on integrating a 3D aircraft model, leveraging the potential of Three.js technology.
Using Blender, we crafted the 3D aircraft model and the sky backdrop. The subsequent step involved compressing and converting the file into a React component, enabling us to utilize plain React refs to manipulate specific aircraft sections. This process was facilitated by a command-line tool, GLTFJSX, which transforms GLTF files into React components.
The golden hour sky scene necessitated precise lighting and color schemes. Since these nuances were impossible through a direct Blender import, we manually recreated them on the frontend from scratch. To select an HDRI map for the website, we utilized the Poly Haven website. Realistic lighting effects featuring orange and pink lights for reflections were achieved with basic Ambient Lighting and DirectionalLight Three.js components.
For animation, GSAP was our library of choice due to its straightforward learning curve and common animation examples. Camera movements were executed by adjusting the X, Y, and Z coordinates.
Expertise
Web development
UX design
Quality assurance
Industry
Transportation
Timeline
3 weeks
Frontend@tech stack, reactjs, threejs, typescript, I18next, GSAP
Design@tech stack, Blender, figma
3;Weeks;to build
6;;Team members engaged
360;°;View of the new livery
The Paris Air Show is the world's largest airshow and aerospace-industry exhibition. Fitzroy Hawk, our long-time creative agency partner, engaged us to develop a specialized 3D microsite aimed at captivating Riyadh Air’s audience with a frictionless smartphone experience.
The biggest challenge was the deadline – 3 weeks for development of the entire microsite experience.
We embarked on the prototype phase, preparing a mock-up for the client to showcase our capabilities. Simultaneously, we worked on integrating a 3D aircraft model, leveraging the potential of Three.js technology.
Using Blender, we crafted the 3D aircraft model and the sky backdrop. The subsequent step involved compressing and converting the file into a React component, enabling us to utilize plain React refs to manipulate specific aircraft sections. This process was facilitated by a command-line tool, GLTFJSX, which transforms GLTF files into React components.
The golden hour sky scene necessitated precise lighting and color schemes. Since these nuances were impossible through a direct Blender import, we manually recreated them on the frontend from scratch. To select an HDRI map for the website, we utilized the Poly Haven website. Realistic lighting effects featuring orange and pink lights for reflections were achieved with basic Ambient Lighting and DirectionalLight Three.js components.
For animation, GSAP was our library of choice due to its straightforward learning curve and common animation examples. Camera movements were executed by adjusting the X, Y, and Z coordinates.
As a result, “The Future Takes Flight” was successfully launched within the 3-week deadline. After scanning a QR code, attendees were greeted with Riyadh Air's new livery, showcased in an interactive 360-degree model. The display features a live version of Riyadh Air's new livery with a design and colors that reflect Saudi warmth and hospitality.
The new design was easily explorable by clicking on a variety of hotspots, allowing users freedom to delve into the content in two languages – English and Arabic. This project not only met the tight deadline but also delivered a multifaceted digital experience, blending advanced web technologies with creative storytelling.
