# whs.js
**Repository Path**: webgl-threejs/whs.js
## Basic Information
- **Project Name**: whs.js
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-11
- **Last Updated**: 2021-04-11
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
[](https://github.com/WhitestormJS/whitestorm.js/releases)
[![Three][three]][three-url]
[![Build Status][travis]][travis-url]
- [Documentation](http://whsjs.io/)
- [Examples](https://whs-dev.surge.sh/examples/)
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)
### 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]() 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 Vector3(0, 0, 50)
})),
new WHS.RenderingModule({bgColor: 0x162129}), // Apply THREE.WebGLRenderer
new WHS.ResizeModule() // Make it resizable.
]);
app.start(); // Run app.
```
#### NPM
```bash
# Install npm version
$ npm install whs
```
[![NPM Version][npm]][npm-url]
### 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://whsjs.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|
|:--:|:----:|:----------|
|[whs-module-statsjs][statsjs]|![statsjs-npm]|WhitestormJS module for JavaScript Performance Monitor โกโ|
|[whs-module-dat.gui][datgui]|![datgui-npm]|User Interface for runtime editing properties ๐๐ ๐ฉ|
|[physics-module-ammonext][physics-ammonext]|![physics-ammonext-npm]|Physics module based on [Ammo.js](https://github.com/kripken/ammo.js/)|
|[whs-module-audio][audio]| WIP |Audio module for 3D positional sound ๐|
|[whs-vrkit][vrkit]|![physics-ammonext-npm]|Module for Virtual Reality|
[statsjs]: https://github.com/WhitestormJS/whs.js/tree/dev/modules/whs-module-statsjs
[statsjs-npm]: https://img.shields.io/npm/v/whs-module-statsjs.svg?style=flat-square
[datgui]: https://github.com/WhitestormJS/whs.js/tree/dev/modules/whs-module-dat.gui
[datgui-npm]: https://img.shields.io/npm/v/whs-module-dat.gui.svg?style=flat-square
[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
[audio]: https://github.com/WhitestormJS/whs.js/tree/dev/modules/whs-module-audio
[vrkit]: https://github.com/WhitestormJS/whs.js/tree/dev/modules/whs-vrkit
[vrkit-npm]: https://img.shields.io/npm/v/whs-vrkit.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