Whs.js
:rocket: 🌪 Super-fast 3D framework for Web Applications 🥇 & Games 🎮. Based on Three.js
Install / Use
/learn @WhitestormJS/Whs.jsREADME
<img src="http://i.imgur.com/EgdbmwO.png" width="40%"></img>
[![Three][three]][three-url]
[![Build Status][travis]][travis-url]
Community chat. [Join us!][discord-url]
[![Discord][discord]][discord-url]
Table of content
New releases
whsis 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
# Install npm version
$ npm install whs
For
whs@2.2.x(Three.js r92) use @beta tag
# Install npm version
$ npm install whs@beta
[![NPM Version][npm]][npm-url]
Basic setup
Download the minified library or link the one from CDN
<script src="js/three.min.js"></script>
<script src="js/whs.min.js"></script>
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.
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.
<a href="http://codepen.io/sasha240100/pen/JELBGX"><img src="http://blog.codepen.io/wp-content/uploads/2012/06/TryItOn-CodePen.png" height="50" /></a>
Featured projects
<a href="https://moxy.studio/"> <img src="https://i.imgur.com/c9bmEDd.jpg?1" alt="https://moxy.studio/" width="30%" /> </a> <a href="https://rmallick6806.github.io/SolarSystemBuilder/"> <img src="https://i.imgur.com/z4wfhXb.png" alt="https://rmallick6806.github.io/SolarSystemBuilder/" width="30%" /> </a> <a href="http://www.tpain.com/"> <img src="https://i.imgur.com/38bdu6G.jpg" alt="http://www.tpain.com/" width="30%" /> </a> <a href="http://artifacts.zone/lorenzav/"> <img src="https://i.imgur.com/rKx39eY.png" alt="http://artifacts.zone/lorenzav/" width="30%" /> </a> <a href="http://artifacts.zone/tree/"> <img src="https://i.imgur.com/y0ZwWVi.png" alt="http://artifacts.zone/tree/" width="30%" /> </a> <a href="http://abdaily.surge.sh/4/"> <img src="http://whs.io/images/showcase/daily4.png" alt="http://abdaily.surge.sh/4/" width="30%" /> </a> <!-- <a href="http://abdaily.surge.sh/3/"> <img src="http://whs.io/images/showcase/daily3.png" alt="http://abdaily.surge.sh/3/" width="30%" /> </a> --> <a href="http://abdaily.surge.sh/2/"> <img src="http://whs.io/images/showcase/daily2.png" alt="http://abdaily.surge.sh/2/" width="30%" /> </a> <a href="http://abdaily.surge.sh/1/"> <img src="http://whs.io/images/showcase/daily1.png" alt="http://abdaily.surge.sh/1/" width="30%" /> </a> <a href="http://theroguepixel.com/"> <img src="http://whs.io/images/showcase/roguepixel.jpg" alt="http://theroguepixel.com/" width="30%" /> </a> <a href="http://supertiny.agency/"> <img src="http://whs.io/images/showcase/supertiny.jpg" alt="http://supertiny.agency/" width="30%" /> </a> <a href="https://alexbuzin.me/"> <img src="http://whs.io/images/showcase/alexbuzinme.jpg" alt="https://alexbuzin.me/" width="30%" /> </a> <a href="https://spatial.100shapes.com/"> <img src="http://whs.io/images/showcase/spatial.jpg" alt="https://spatial.100shapes.com/" width="30%" /> </a> <a href="http://plateaux.space/"> <img src="http://whs.io/images/showcase/plateux.jpg" alt="http://plateaux.space/" width="30%" /> </a>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|
|:--:|:----:|:----------|
|physics-module-ammonext|
|Physics module based on Ammo.js|
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💡🎁.
<a href="https://opencollective.com/whitestormjs/backer/0/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/0/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/1/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/1/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/2/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/2/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/3/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/3/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/4/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/4/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/5/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/5/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/6/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/6/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/7/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/7/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/8/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/8/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/9/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/9/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/10/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/10/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/11/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/11/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/12/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/12/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/13/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/13/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/14/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/14/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/15/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/15/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/16/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/16/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/17/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/17/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/18/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/18/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/19/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/19/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/20/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/20/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/21/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/21/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/22/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/22/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/23/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/23/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/24/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/24/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/25/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/25/avatar"></a> <a href="https://opencollective.com/whitestormjs/backer/26/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/26/avatar"></a> <a href="https://opencollective.com/whitestormjs/backe
