# Physics-based 3D cloth using Three.js and Cannon.js

Learn how to create a physics-based 3D cloth with [Cannon.js](https://github.com/schteppe/cannon.js) and [Three.js](https://threejs.org/) and use simplex noise to create a wind effect. By [Arno Di Nunzio](https://twitter.com/aqro)

![Physics-based 3D cloth with cannon.js and three.js](https://tympanus.net/codrops/wp-content/uploads/2020/02/3DCloth_featured.jpg)

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

[Demo](http://tympanus.net/Tutorials/3DClothSlideshow/)

## Installation
Run this command in the terminal
```
npm install
```

Compile the code
```
npm run build
```

Compile the code with a local server
```
npm run watch
```

## Credits

- Slideshow based on [Jesper Landberg's](https://twitter.com/Jesper_Landberg) [slider](https://codepen.io/ReGGae/pen/povjKxV)
- [Three.js](https://threejs.org/)
- [Cannon.js](https://github.com/schteppe/cannon.js)
- [Simplex noise](https://www.npmjs.com/package/simplex-noise)

## 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 Arno: [Twitter](https://twitter.com/aqro), [Dribbble](https://dribbble.com/Aqro), [Instagram](https://instagram.com/aqro/), [GitHub](https://github.com/Aqro)

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 2019](http://www.codrops.com)