UK - 01926 333777
ROI - 01 297 4440
Search
01926 333777
SOLIDWORKS Elite Specialists

Creating Interactive Animations with SOLIDWORKS Visualize

Monday March 11, 2019 at 11:42am
Interactive Images are a great export option within Visualize Professional, allowing you to view the model in a series of 360 orbital spins within a web browser. However, what happens if I want to use this interactive method to demonstrate a mechanism or animation instead? By utilising this method, we can allow users to interactively play through their animation by simply scrolling across the screen, reversing and focusing upon any chosen element of the sequence. 

Blender Animation

Click and drag left to right to play animation - This is a large file, it may not load immediately

 

So how can we create this interactive and immersive content?

It is by combining both the exports of an animation and an Interactive Image. First, let us focus upon creating the Interactive Image.  

 

Interactive Image  

An interactive image is a collection of rendered images that are viewed and controlled within a html file.

In this instance, we simply want to create a placeholder for the stills from the animation. Choose Interactive Image under the Output Mode and select a single orbit. This will create only a single spin around the model, however the number of images will be the number of stills created in our animation.

So for my example, I will be rendering out a 10 second long animation at 30 frames per second.

This simply is 30 x 10, so simply 300 Images per Orbit needed.

Render this at Preview mode, at the same resolution as the Animation. We will be removing the still images and replacing them with the animation images instead.

 

Creating the Animation

Export the animation as individual frames by unselecting the Create Movie checkbox. I would also recommend naming the file Frame, for ease of compiling both the animation and Interactive Image in the next step.

 

Combining the Animation and the Interactive Image

This is where the magic happens, we are going to replace the images within the Interactive Image with our animation instead!

Find the Image sub-folder within the Interactive Image and you will see the individual still with a sequential naming sequence. Delete all of these images an instead paste in your rendered stills from your animation. You will notice that the files from the animation have a slightly different naming structure, Frame_0001 rather than Frame000001. We will need to change this behind the scenes.

Find the JS folder inside data, to reveal the hidden away JavaScript controlling the Interactive Image. Right click upon threesixty.js and choose to edit within Notepad.

You will see the naming structure Frame#####.jpg listed.



Change this to Frame_####.jpg

This will change the naming structure to the files within the Images folder.

If you didn’t save your animation still as Frame, we can easily tweak the name here. Simply remove Frame and change to the new filename – don’t forget to leave the Hash symbols (#) in to denote the numbers at the end.

Open the Interactive Image backup from the Open.html file and view your work!

 

Fine Tuning

Want to fine tune your interaction with the model?

Edit the vr.js file and edit the ‘InfiniteAxis’ to read false,false.

This will prevent the animation looping and going back to the start.

Change the ‘Grabbable’ values to alter how far you need to drag your mouse to play through the animation.

The ‘ThrowDuration’ allows you alter the inertia and how long the effect continues after you have released your mouse.


Related Blog Posts

Custom Settings - Collated Quick Tips
We’ve collated some of our favourite tips on how you can customise your SOLIDWORKS interface to suit your preferences along with aiding your efficiency…
What is Extended Reality(XR)?
SOLIDWORKS XR (Extended Reality) is a new and exciting development that sits within the existing SOLIDWORKS products, allowing you to interact with your 3D models like never before. We have created a miniseries of videos to introduce the topic.
Working with Imported Geometry Webcast Series
SOLIDWORKS is able to import and edit a large number of different CAD file formats, this webcast series aims to explain what you need to know to make this process as smooth and efficient as possible.
Top