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

3D Experience - 3D Swym
The 3DSwym application is at the heart of the 3D Experience platform and is the gateway to collaboration within your business. It allows users to post ideas and concepts and interact with them as things progress from concept to reality. Ideas are jus...
SOLIDWORKS PCB BOM Template Column Map
A document mapping columns within installed SOLIDWORKS PCB BOM Templates
Designing the Scorpion - Game of Thrones
As huge fans of the show we have been wanting to model something from it ever since the last episode aired. Check out this video to see how SOLIDWORKS could have been used to help design arguably the most impressive piece of engineering in Westeros -...
Top