Whitestorm.js

Super-fast 3D framework for Web Applications & Games . Based on Three.js

3D
WhitestormJS/whs.jswhs

README


undefined [![Three][three]][three-url] [![Build Status][travis]][travis-url]

- Documentation
- Examples

Community chat. [Join us!][discord-url]
[![Discord][discord]][discord-url]

Table of content


- Basic setup
   - npm
- Featured projects
- Features
- Donate
- Why?


Basic setup


Download the minified library or link the one from CDN

  1. ``` html
  2. <script src="js/three.min.js"></script>
  3. <script src="js/whs.min.js"></script>
  4. ```

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.

  1. ``` js
  2. const app = new WHS.App([
  3.   new WHS.ElementModule(), // Apply to DOM.
  4.   new WHS.SceneModule(), // Create a new THREE.Scene and set it to app.

  6.   new WHS.DefineModule('camera', new WHS.PerspectiveCamera({ // Apply a camera.
  7.     position: new Vector3(0, 0, 50)
  8.   })),

  10.   new WHS.RenderingModule({bgColor: 0x162129}), // Apply THREE.WebGLRenderer
  11.   new WHS.ResizeModule() // Make it resizable.
  12. ]);

  14. app.start(); // Run app.
  15. ```



NPM


  1. ``` sh
  2. # Install npm version
  3. $ npm install whs
  4. ```
[![NPM Version][npm]][npm-url]

Featured projects


http://abdaily.surge.sh/4/ http://abdaily.surge.sh/3/ http://abdaily.surge.sh/2/ http://abdaily.surge.sh/1/ http://theroguepixel.com/ http://supertiny.agency/ https://alexbuzin.me/ https://spatial.100shapes.com/ http://plateaux.space/


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 friendly
✔️ Integrated Three.js 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|
|[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