11 Dec 2018

View each floor, using 'Vertical explode'

Demo: DEMO


Introduction to 'Exploding' floors

I was recently asked, "is there a way to view each floor of a Revit building, when there is no 'floor tags' ?"...  why yes, there is...  Use the "floor exploder" !

This effect is made up of three parts...

  1. Explode function (controlled by a slider)
  2. Slow down the ForgeViewer Camera
  3. Ease animation for level explode
  4. Restoring 4 different camera states

1. An alternative 'Explode' effect, specifically for AEC / buildings

I first customize the explode code from Philippe's blog post. I then restrict the transforms to vertical only. Finally, I cluster objects by their vertical position within a level. You can test the functionality using the slider.

Here's the main code:

var cz = Math.floor(boxes[box_offset + 2] / 10) * 10;
pt.z = cz * scale * 4;
fragList.updateAnimTransform(fragId, null, null, pt);

2. Ease animation for level explode

Next, I need to add smooth explode animation, when I click open or close. I borrowed from this simple example source-code, and simply applied it to the onSlider() method

// animate.js
function circ(timeFraction) { return 1 - Math.sin(Math.acos(timeFraction)) }

function makeEaseOut(timing) { return function(timeFraction) {return 1 - timing(1 - timeFraction)}}

function animate({timing, draw, duration}) {
  let start = performance.now();
  requestAnimationFrame(function animate(time) {
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;
    let progress = timing(timeFraction);
    draw(progress); // draw it
    if (timeFraction < 1) {


3. Slow down the ForgeViewer Camera

You can slow down the Forge Viewer's camera transitions using these two lines...

viewer.autocam.shotParams.duration = 3;


4. Restoring 4 different camera states

I've done this trick a few times before.

Simply set up your camera view and hide objects in the scene manually, then capture the camera-state using...

view_state_level1 = getState({viewport: true, objectSet: true})

Then build a menu with buttons, with each button restoring your pre-canned view, like this...


I grouped together 4 different view states, into the vstates array and switched between them.


Click on the live demo here: DEMO

You can find the source code on GitHub: SOURCE-CODE

And that's all there is to it.

Remember to follow me on Twitter:  @micbeale

Related Article

Posted By

Michael Beale

Michael Beale

Michael Beale is a senior software engineer at Autodesk, where he has been a globe-trotting technical advocate for Forge. Michael focuses on connecting Autodesk cloud data and Autodesk Forge APIs to the browser. He’s also contributed to Autodesk Homestyler, the Forge Large Model Viewer (LMV), Autodesk Prooflab, Stereo-Panorama service with webVR and recently 3D formats, such as glTF and 3D-Tiles-Next. Twitter:...