Initially requested as an interactive 3D turret for a particular Webflow Landing webpage, this project has become into a gamified Spline experience where the product (turret) interacts with its environment (takes down drones).

The final product is a Spline scene which offers a gamified experience for users where they are able to control a sentry turret with mouse cursor and also take down flying drones through mouse interactions (click events).

Spline is probably one of the best tools in market today to embed 3D scenes and experiences with current responsive websites and dedicated apps and this project proves how slowly is improving and getting into gamified experiences. As 3D artist, play with limitations is an incentive to work for a fun and original result. In this case, shaders are realistic and lighting has to bring elegance and modern look. Compared to plain colors and cartoon shaders, our option was more risky since consumes a bit more.

This plays along with the fact the drones which the user has already taken down cannot be respawned, so we had to boost the experience by adding multiple drones which offer a more various yet limited effect.

Affecting to performance, there are also animations for both turret and drones and particle systems which activate once the user takes down the drone by clicking on it.

As result, I could implement all these features without affecting the performance negatively with long load times or slow performance.

Our main goal is bring the user an interactive experience to produce familiarity acknowledge the product and generate engagement.

Did you know a good 3D experience can produce around +30% customer impact & conversion for complex products?

This project presents only two assets, one of them being the Hero asset which is the main product, the turret.

Interactivity plays the big role here. Hero asset has been split in 2 groups and contains 2 states with Look At events and Generate object for the shooting effect.

For the drones, movement and falling paths have been drawed with Transition events between multiple states, interchangeable depending if the user interacts by clicking them.

Along these falling animations, more events such as Eliminate object and Particle control are triggered given the user interaction.