one
more sip

Like all self-respecting nerds, we’re always on the lookout for an excuse to play around with new tech! This exploration combines both Rive and Three.js bringing interactivity and gamification to CSR.

Try it out

Introduction

While interactive experiences have been around for a while now, the past couple of years saw very big advancements in democratizing these technologies, making them attractive to designers and developers alike. What these developments mean is that fully interactive and engaging experiences are now only one click away from your audience, and the best part is, they run practically on everything, without needing to install any apps or additional software. Just open your browser and explore new worlds.

Building an interactive 3D experience

Three.js is a staple JavaScript library for creating cross-browser WebGL content. Created by Ricardo Cabello (a.k.a. mrdoob) back in 2010, this incredibly popular library has over 1.5 million weekly downloads and has now been adopted as the go-to for the majority of 3D experience on the web, with companies like Apple, NASA and Tesla integrating them into their websites among many others.

The asset creation for this experience started in our 3d package of choice, Cinema 4D, where we proceeded to model, texture and light our scene. With our playground now established, all we needed to move over to the web was exporting our 3D objects as GLTF and baking out our textures. While this on its own looks pretty, it doesn’t do much in the way of interactivity; that’s where three.js comes in.

Moving over to VS Code, we imported all of the previously created assets and started adding the programmatic animations enabled by three.js and GSAP. From camera animations, a water cup floating around in a limbo, straws flying in out of no-where, this previously static scene was now full of life, but you’ll notice a very important element is missing, a UI.

A new way
to build
graphics

Used by companies like Duolingo, Google, and Figma, Rive is a powerful tool for building graphics for software and the web. It combines game engine features like state-driven animations with vector design tools and animation timelines, eliminating the need for hard-coded 2D graphics. Our team started with a design mock-up in Adobe Illustrator, seamlessly importing vector graphics into Rive. Once animated, the state machine allowed us to link animations and respond to user interactions intuitively, turning simple elements into fun, memorable experiences.

Previously, changing visuals, animations, and effects required significant time, but Rive enabled a flexible, iterative workflow. Our team had the freedom to create animations without worrying about implementation, making the process more efficient and creative. With all animations and state machine inputs prepared, we successfully combined our Rive UI with our three.js experience.

Use the toggle switch to test

Putting it all together

Now how does this “.riv” file we created become a full fledged UI you might ask and this is where the magic happens. You see, rive has runtimes for tons of platforms. These runtimes allow you to easily embed the interactive animations you create into your projects. And in our case, their Rive Web runtime, a Javascript/TypeScript WASM runtime library was just the tool we needed.

So what does that leave us with?

On one hand, we have a fully interactive 3D experience powered by the three.js JavaScript library, and on the other, we have a rive file, powered by the rive Javascript library.  With both of these using the same language, putting them together becomes a piece of cake!
All we needed to do was listen to the interactions happening on the UI side, and call the appropriate functions and animations on the 3D side.

And voila! It’s as simple as that!

This is nice and all, but why should we care?

So far, the average user spends around 35 seconds engaging with the experience. That amount of time is really substantial considering that the message conveyed had it been written down in text form would only take about 6 seconds to read while also being drastically less impactful, engaging, or memorable. Interactivity allows us to communicate with audiences in ways that allow a more natural connection. And just like every last drop matters, every second that user spends engaging, is an opportunity.