scroll

Riyadh Air

Building a microsite with a 3D plane model

Experiential design studio Fitzroy Hawk approached Apptension with a request to build a microsite featuring an interactive 3D animation of the new Riyadh Air livery. This experience was initially to be presented at the Paris Air Show as a QR code accessible microsite.

Expertise 

Web development 

UX design 

Quality assurance

Industry

Transportation

Timeline

3 weeks

Challenge

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.

Challenge
Challenge

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.

Challenge
Requirements
Challenge
Process
Technical Requirements

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.

The Challenge

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.

Our Process

what partners say about us?

The code and the work were good quality and really what we were looking for. They were able to bring technical design thinking to the project. Project management was tight and I always knew what was happening.
Daniel Kiyoi
CEO & Founder Magic Dust
Apptension was flexible and professional. When I needed to quickly add capacity, it took a week or two at worst - often days. The cooperation enabled me to slowly scale up my own IT team, and the company was very helpful until the last moments of the transition.
Mateusz Oleksiuk
CEO LESS_
The technical creativity delivered by the team at Apptension was invaluable in the formation of our mixed reality start-up Hyper.
Nathan Sparshott
Co-Founder & CEO of Hyper
The SaaS Boilerplate Apptension built was a huge reason we were so successful, because all these little seemingly unrelated tasks and integrations needed to happen. If we had been working with anybody else, It would have probably taken months to do the same work.
Kwame Nyanning
CEO blkbx.
We needed their help to build the backend services and capabilities needed to deliver a production level on demand. Their ability to produce high-quality work with consistency while dealing with a new type of project was impressive.
Kelly O’Conor
Product Lead, Siberia
The project’s success has resulted in a long-term partnership for design and development. Apptension is a fantastic partner, who is willing to go above and beyond in order to deliver what the client needs.
Catarina Rocha
p(r)oud solutions
Apptension fared well in our project, working with our bespoke CMS and complex requirements. The designs were implemented well and the schedule was kept tight.
Christian Marc Schmidt
Partner at Schema
Looking for similar outcomes?

recent case studies

Riyadh Air
Building a microsite with a 3D plane model
About
Experiential design studio Fitzroy Hawk approached Apptension with a request to build a microsite featuring an interactive 3D animation of the new Riyadh Air livery. This experience was initially to be presented at the Paris Air Show as a QR code accessible microsite.

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

django
flask
react native
node.js
next.js
python
gatsby.js
vue.js
react.js
javascript
aws
docker
serverless
figma
photoshop
illustrator
after effects
firebase
blender
graphql
nuxt.js
Scss
typescript
apollo
saas boilerplate
styled components
D3
bigcommerce
bigquery
Wagtail CMS
Django Rest
redux
gsap
i18next
kubernetes
Google Cloud
Platform
rabbitmq
celery

3;Weeks;to build

6;;Team members engaged

360;°;View of the new livery

Before
After
Prerequisites
Challenge

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.

Challenge
Process

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.

Requirements
Solution

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.

Roadmap
Solution

WHAT The CLIENT Said ABOUT this project?

what partners say about us?

The code and the work were good quality and really what we were looking for. They were able to bring technical design thinking to the project. Project management was tight and I always knew what was happening.
Daniel Kiyoi
CEO & Founder Magic Dust
Apptension was flexible and professional. When I needed to quickly add capacity, it took a week or two at worst - often days. The cooperation enabled me to slowly scale up my own IT team, and the company was very helpful until the last moments of the transition.
Mateusz Oleksiuk
CEO LESS_
The technical creativity delivered by the team at Apptension was invaluable in the formation of our mixed reality start-up Hyper.
Nathan Sparshott
Co-Founder & CEO of Hyper
The SaaS Boilerplate Apptension built was a huge reason we were so successful, because all these little seemingly unrelated tasks and integrations needed to happen. If we had been working with anybody else, It would have probably taken months to do the same work.
Kwame Nyanning
CEO blkbx.
We needed their help to build the backend services and capabilities needed to deliver a production level on demand. Their ability to produce high-quality work with consistency while dealing with a new type of project was impressive.
Kelly O’Conor
Product Lead, Siberia
The project’s success has resulted in a long-term partnership for design and development. Apptension is a fantastic partner, who is willing to go above and beyond in order to deliver what the client needs.
Catarina Rocha
p(r)oud solutions
Apptension fared well in our project, working with our bespoke CMS and complex requirements. The designs were implemented well and the schedule was kept tight.
Christian Marc Schmidt
Partner at Schema

other success stories

Conversational AI Avatar
Building a real-time conversational AI avatar
Feelit
A SaaS mobile app designed to bridge the gap between event attendees and event makers
Creative agency
Developing an eCommerce website for a luxury brand
Mojo
A website solution for an AI-based fertility tester
mTab
Building a full-stack data analysis, visualization and storytelling platform
Platform
Ecommerce store for selling contemporary art