whs.js

• Documentation
• Examples

Community chat. Join us!

Table of content

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

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 Vector3(0, 0, 50)
  })),

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

app.start(); // Run app.

NPM

# Install npm version
$ npm install whs

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 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		WhitestormJS module for JavaScript Performance Monitor ⚡⌛
whs-module-dat.gui		User Interface for runtime editing properties 🔑🛠🔩
physics-module-ammonext		Physics module based on Ammo.js
whs-module-audio	WIP	Audio module for 3D positional sound 🔉
whs-vrkit		Module for Virtual Reality

Donate

Backers

Support us with a monthly donation and help us continue framework development🎉 and adding new features💡🎁.