Skill
Role
Software
3D Modeling
3D Design
3D Animation
Interaction Design
3D Modeling
Interactive Scene
3D animation
Responsive Setting
Spline
Omnia1 Analytics
3D Design for Omnia1 Analytics
As a Spline 3D artist, I collaborated on an interactive 3D website development project for Omnia1 Analytics.
My role involved creating interactive 3D elements and animations using Spline for their Webflow website.
Project Summary and Concept
Omnia 1 Analytics is a digital analytics and growth marketing agency.
They use SEO and analytics tools to help clients increase conversions and leads, providing strategic digital marketing solutions.
We took on the challenge of creating a responsive, interactive 3D scene to showcase the solutions and value they provide.
I worked with an amazing global creative team, including Ian, a creative director and Webflow designer based in the US, and Teng, a Webflow developer based in Thailand.
Scroll Interaction
We implemented a scene in the hero section of the website that features various marketing tools being transported on a conveyor belt, with corresponding digital platforms and social media outputs displayed through a 3D projector.
I added a scroll interaction so that as you scroll, the camera angle changes and zooms in on the dashboard screen.
To ensure this 3D scene looks beautiful and functions smoothly on all devices, we worked closely with the developer to repeatedly adjust the camera positioning for responsive design.
The glass tiles and icons on the conveyor belt are animated to pass through the central scanner at regular intervals, and scanned icons are set to change color.
As each icon is scanned, the screen of the associated social media platform appears in sync with the scanning.
The glass tiles and icons on the conveyor belt are animated to pass through the central scanner at regular intervals, and scanned icons are set to change color.
As each icon is scanned, the screen of the associated social media platform appears in sync with the scanning.
FINAL OUTPUTS
3D Design for Omnia1 Analytics
3D Assets Design
We started by exploring various 3D icon styles.
Under the excellent direction of Creative Director Ian, I proposed multiple designs.
Ultimately, we chose glass material with green tiles that matched the overall brand tone of the website.
Spline excels in 3D representations of glass and reflections, making this 3D design an exciting experience for me.
The Biggest Challenge of This Project
The biggest challenge of this project was minimizing the data size of the 3D scene.
The 3D scene was embedded in Webflow using Spline's Viewer code and included multiple objects such as glassy icons, a projector, and a conveyor belt.
To optimize the data size, I utilized Spline's instance and clone features.
It was also necessary to model with as few polygons as possible.
Additionally, by optimizing the size of the images used in the materials, we were able to achieve a high score for both the final export size and the loading speed.
3D Assets Design
We started by exploring various 3D icon styles.
Under the excellent direction of Creative Director Ian, I proposed multiple designs.
Ultimately, we chose glass material with green tiles that matched the overall brand tone of the website.
Spline excels in 3D representations of glass and reflections, making this 3D design an exciting experience for me.
The Biggest Challenge of This Project
The biggest challenge of this project was minimizing the data size of the 3D scene.
The 3D scene was embedded in Webflow using Spline's Viewer code and included multiple objects such as glassy icons, a projector, and a conveyor belt.
To optimize the data size, I utilized Spline's instance and clone features.
It was also necessary to model with as few polygons as possible.
Additionally, by optimizing the size of the images used in the materials, we were able to achieve a high score for both the final export size and the loading speed.
3D icons with color-changing interaction
The website also uses other 3D image assets.
For example, in the section introducing services, the corresponding icon rises according to the service selected by the user.
To create more contrast, I proposed an animation where the colors change between the default state and the active state.
You can play with Live Demo, This is another demo scene that includes icons for each service.
For this test scene, you can type 【1,2,3,4】on your keyboard to see the interactions.
_gif.gif){kind=icon}
3D Design for Omnia1 Analytics
