Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/WhitestormJS/whs.js
:rocket: ๐ช Super-fast 3D framework for Web Applications ๐ฅ & Games ๐ฎ. Based on Three.js
https://github.com/WhitestormJS/whs.js
component-driven framework high-performance modular physics react scene-graph web-development webpack
Last synced: about 2 months ago
JSON representation
:rocket: ๐ช Super-fast 3D framework for Web Applications ๐ฅ & Games ๐ฎ. Based on Three.js
- Host: GitHub
- URL: https://github.com/WhitestormJS/whs.js
- Owner: WhitestormJS
- License: mit
- Created: 2015-08-30T10:29:14.000Z (about 9 years ago)
- Default Branch: dev
- Last Pushed: 2023-04-16T18:10:45.000Z (over 1 year ago)
- Last Synced: 2024-04-13T16:34:53.931Z (5 months ago)
- Topics: component-driven, framework, high-performance, modular, physics, react, scene-graph, web-development, webpack
- Language: JavaScript
- Homepage:
- Size: 334 MB
- Stars: 6,090
- Watchers: 251
- Forks: 390
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-game-engine-dev - WhitestormJS - Framework for 3D apps / games, built on _Three.js_. (Libraries / JavaScript)
README
[![](https://img.shields.io/github/release/WhitestormJS/whitestorm.js.svg?style=flat-square)](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 `[email protected]` (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]|[![NPM Version](https://img.shields.io/npm/v/physics-module-ammonext.svg?style=flat-square)](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