floor-animation

KO | EN

gitlite — search

#python #react #ai #llm #machine-learning #rust #linux #macos #vue #awesome-list #security #pytorch #mcp #open-source

floor-animation

(★ 15)

view each floor of a building using an custom vertical 'explode' animation

floor-animation Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Floor-Animation

View each floor of a building using an custom vertical 'explode' animation

### Live Demo: [DEMO](https://wallabyway.github.io/floor-animation/)

### Blog: https://forge.autodesk.com/blog/view-each-floor-using-vertical-explode

### Exploding floors

This effect is made up of three parts...

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

#### 1. Explode method for AEC / buildings

I first customize the explode code from [Philippe's blog post](https://forge.autodesk.com/blog/selective-explode-viewer).  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.

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

```

#### 2. Slow down the ForgeViewer Camera
You can slow down the Forge Viewer's camera transitions using these two lines...

```
viewer.autocam.shotParams.destinationPercent=3;
viewer.autocam.shotParams.duration = 3;
```

#### 3. 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](https://javascript.info/task/animate-ball-hops), and simply applied it to the [onSlider()](https://github.com/wallabyway/floor-animation/blob/a3199dc4a5d82df5146db8b795e3459df90e85e8/docs/app.js#L31-L33) method

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

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

```

#### 4. Restoring 4 different camera states

I've done this trick a few times [before](https://forge.autodesk.com/blog/3d-markup-icons-and-info-card).

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

```
view_state_level1 = viewer.getState()
```

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

```
viewer.restoreState(view_state_level1)
```

floor-animation

floor-animation Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

floor-animation

floor-animation Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README