3D in Readymag: 3 ways to add and control volume visuals

When 2D isn’t enough to give voice to an idea, you can go to an extra dimension. 3D visuals are great both as a handy product showcase and an artistic statement, with models so diverse in style and motion that they can cover almost anything. There are three ways to simulate or embed such elements in your website. This guide will walk you through them and show you a few examples of “wow” visuals in business and art.

Animate 3D with Shots

Shots is a widget where you can add videos or sequences of images. They’ll then replay smoothly and can be controlled by visitors via their actions. While it’s mainly used for short sequences—animated illustrations, moving backgrounds, and process indicators—Shots are also a great way to simulate 3D. Shots can be published only on paid plans, but you can always play around with them to see how it all works even on the Free plan.

You can upload a video in MP4, MOV, FLV, AVI, WebM, and MKV format or a sequence of images in PNG or JPEG format.

How to use Shots for 3D

Create a short animation using your 3D tool of choice and export it as a video file or a sequence of stills. Then, upload that sequence to the Shots widget and choose the trigger type: mouse move, hover, click, or scroll. Since Shots is a widget, you can add animations to it in addition to how the sequence is animated. Experiment as much as you can to find your perfect combo. As a result, your visual will feel like interactive 3D and look jaw-dropping.

If you’re using image sequences, aim for a maximum of 100 frames—enough for fluid motion, but not so many that it slows down your site. Also, don’t add many Shots to one website—the recommended maximum for smooth website loading is two.

When you upload videos to Shots, you won’t be able to keep a transparent background. To have your 3D against a transparent background, first delete your background and then export the sequences. You can do this in Adobe After Effects or other similar tools.

Embed 3D: from Endless Tools or Spline

With Readymag’s Code widget, embedding visuals from a third-party tool is easy and requires no actual coding knowledge. You just take the piece of code your tool generates, add it to the Code widget, and there it is—your 3D object in the Readymag Editor. For these kinds of embeds, you might use the Endless tools or Spline—web-based 3D editors that work smoothly with Readymag.

Adding 3D from Endless Tools

Endless Tools is a handy way to add real-time 3D to your Readymag site. It offers a collection of pre-made objects with variable behaviours, as well as materials and effects.

Once you’ve finished your 3D scene, click the “Share” button and choose “Embed.” You’ll get a few lines of code for the iframe. Head back to Readymag, add a Code widget, and paste the code in the tab you see. That’s it—your interactive 3D scene is live and ready to be further animated.

Adding 3D from Spline

Once your design is ready in Spline, you can export it for the web–the tool will give you an iframe embed code. Drop it into a Code widget in Readymag and enjoy your ideas coming to life.

Since the embed is responsive by default, it’ll scale to fit your layout. But if you want custom control over sizing and positioning, you can always add more interactions with more code.

With the right tool and a little preparation, you can bring one more dimension to your Readymag website—and get all eyes and senses on your idea. You can find additional 3D integration advice on our Forum, and other design tricks in the Blog.