https://github.com/iondrimba/buildings-wave

:european_post_office: A tutorial on how to create a 3D building wave animation with three.js and TweenMax
https://github.com/iondrimba/buildings-wave

3d animation animations creative-coding es6 es6-javascript frontend javascript js motion threejs threejs-example webgl

Last synced: 17 days ago
JSON representation

:european_post_office: A tutorial on how to create a 3D building wave animation with three.js and TweenMax

• Host: GitHub
• URL: https://github.com/iondrimba/buildings-wave
• Owner: iondrimba
• Created: 2019-01-20T18:28:44.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T20:13:17.000Z (over 1 year ago)
• Last Synced: 2024-10-11T00:54:11.442Z (about 1 month ago)
• Topics: 3d, animation, animations, creative-coding, es6, es6-javascript, frontend, javascript, js, motion, threejs, threejs-example, webgl
• Language: JavaScript
• Homepage:
• Size: 2.95 MB
• Stars: 90
• Watchers: 3
• Forks: 29
• Open Issues: 34
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# :european_post_office: Buildings Wave Animation with Three.js

![CI](https://github.com/iondrimba/buildings-wave/workflows/CI/badge.svg)

[First Demo](https://tympanus.net/Tutorials/BuildingsWave/index.html)

[Second Demo](https://tympanus.net/Tutorials/BuildingsWave/index2.html)

A tutorial on how to create a 3D building wave animation with three.js and TweenMax. By Ion D. Filho.

![Buildings Wave](https://tympanus.net/codrops/wp-content/uploads/2019/01/BuildingsWave_featured.jpg)

[Article on Codrops](https://tympanus.net/codrops/?p=37794)

## Requirements

* nodejs 8+

### Contents

````bash

with-controls/ and no-controls/

  src/

    scripts/...

    styles/...

    index.html

    index.js

    config files...

LICENSE

README.md

````

### Installation

```sh

cd with-controls or no-controls

$ npm install

$ npm start

```

### Build

```sh

cd with-controls or no-controls

$ npm run build

```

### output folder

````bash

with-controls/ and no-controls/

  public/

    app.##hash##.js

    app.##hash##.css

    index.html

````

## Credits

* [Threejs](https://threejs.org/)

* [TweenMax](https://greensock.com/tweenmax)

* [Buildings Icon by Freepik](https://www.flaticon.com/free-icon/apartments_88945)

* [Models by Backlog Studio](https://free3d.com/3d-model/19-low-poly-buildings-974347.html)

## License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

## Misc

Follow Ion Drimba Filho: [Twitter](https://twitter.com/code__music), [Codepen](https://codepen.io/iondrimba/), [GitHub](https://github.com/iondrimba)

Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/)

[© Codrops 2018](http://www.codrops.com)