[](https://github.com/WhitestormJS/whitestorm.js/releases)
[![Three][three]][three-url]
[![Build Status][travis]][travis-url]
- [Documentation](http://whs.io/)
- [Examples](https://whs-dev.surge.sh/examples/)
- [Contributions/Trello](https://trello.com/b/ktjiOLrd/whitestormjs-contributions)
- [Donate / OpenCollective](https://opencollective.com/whitestormjs)
Community chat. [Join us!][discord-url]
[![Discord][discord]][discord-url]
### Table of content
- [Basic setup](#basic-setup)
- [npm](#npm)
- [Featured projects](#featured-projects)
- [Features](#features)
- [Donate](#donate)
- [Why?](/.github/WHY.md)
##### New releases
> `whs` is currently at v2 major version. We had plans for v3 yet but development isn't active. So v2 will probably remain the main stable version until further notice.
> We try to publish **minor update releases** for bug fixes, we will review PRs.
#### NPM
```bash
# Install npm version
$ npm install whs
```
> For `whs@2.2.x` (Three.js r92) use @beta tag
```bash
# Install npm version
$ npm install whs@beta
```
[![NPM Version][npm]][npm-url]
### Basic setup
Download the [minified library](https://raw.githubusercontent.com/WhitestormJS/whs.js/dev/build/whs.min.js) or link the one from [CDN](https://cdnjs.com/libraries/whitestorm.js)
```html
```
The code below makes a `WHS.App` instance which handles all your [modules](modules) and components for better work with `WebGL`. This one creates a _scene_, _camera_ and _renderer_ - we add the following modules to the App.
```js
const app = new WHS.App([
new WHS.ElementModule(), // Apply to DOM.
new WHS.SceneModule(), // Create a new THREE.Scene and set it to app.
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({ // Apply a camera.
position: new THREE.Vector3(0, 0, 50)
})),
new WHS.RenderingModule({bgColor: 0x162129}), // Apply THREE.WebGLRenderer
new WHS.ResizeModule() // Make it resizable.
]);
app.start(); // Run app.
```
### Featured projects
### Features
* 💎 **Simple in usage**
* :rocket: Speeds up 3D scene prototyping
* 🔌 **Component based scene graph**
* 💣 Simple integration of any **high performance physics** even with `Worker` (Multithreading)
* :dizzy: Automatization of rendering
* 🆕 **ES2015+ based**
* :large_blue_diamond: Extension system (modules)
* :package: [Webpack](https://whs.io/Usage%20with%20webpack.html) friendly
* ✔️ **Integrated [Three.js](https://threejs.org/) rendering engine**
* :revolving_hearts: Work with whs.js and Three.js at the same time
### External Modules
|Name|Status|Description|
|:--:|:----:|:----------|
|[physics-module-ammonext][physics-ammonext]|[](https://www.npmjs.com/package/physics-module-ammonext)|Physics module based on [Ammo.js](https://github.com/kripken/ammo.js/)|
[physics-ammonext]: https://github.com/WhitestormJS/physics-module-ammonext
[physics-ammonext-npm]: https://img.shields.io/npm/v/physics-module-ammonext.svg?style=flat-square
### Donate
[![OpenCollective Backers][backer-badge]][backer-url]
[![OpenCollective Sponsors][sponsor-badge]][sponsor-url]
#### Backers
Support us with a monthly donation and help us continue framework development🎉 and adding new features💡🎁.
[xo]: https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square
[xo-url]: https://github.com/sindresorhus/xo
[three]: https://img.shields.io/badge/three-r86-blue.svg?style=flat-square
[three-url]: https://github.com/mrdoob/three.js/
[npm]: https://img.shields.io/npm/v/whs.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/whs
[travis]: https://img.shields.io/travis/WhitestormJS/whs.js.svg?style=flat-square
[travis-url]: https://travis-ci.org/WhitestormJS/whs.js?branch=develop
[discord]: https://discordapp.com/api/guilds/238405369859145729/widget.png
[discord-url]: https://discord.gg/frNetGE
[backer-url]: https://opencollective.com/whitestormjs
[backer-badge]: https://opencollective.com/whitestormjs/backers/badge.svg?color=blue
[support-url]: https://opencollective.com/whitestormjs#support
[sponsor-url]: https://opencollective.com/whitestormjs
[sponsor-badge]: https://opencollective.com/whitestormjs/sponsors/badge.svg?color=blue