README.md

Table of Contents

• Installation
• Getting Started
• Features
• Featured Projects
• Contributing
• External Modules
• Donate
• Backers

Installation

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.

You can install the library using npm or by downloading the library directly.

Install via npm

For the latest stable version:

# Install npm version
$ npm install whs

For the beta version use @beta tag

# Install npm version
$ npm install whs@beta

Getting Started

Download the minified library or link the one from CDN

The code below shows you how to include these libraries using the script tag in your HTML files.

<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. The scene holds all the object you would want to display such as models or animations. The camera defines what is visible to the user/viewer. The renderer draws the scene.

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.

Features

• 💎 User-Friendly – Designed to be simple and intuitive to use.
• 🚀 Fast Prototyping – Quickly test and refine your 3D designs with minimal setup
• 🔌 Component-Based Scene Graph – Organize your scene using a architecture that makes managing 3D objects easy.
• 💣 High-Performance Physics Integration – Simple integration of any high performance physics even with Worker (Multithreading).
• ✨ Automated Rendering – Automatically handle rendering tasks.
• 🆕 Modern JavaScript (ES2015+) – Built with ES2015+ standards.
• 🔧 Extensible with Modules – Customize and extend functionality using the modular extension system, giving you flexibility in how you build your scenes.
• 📦 Webpack and Three.js Friendly – Integration with Webpack and Three.js
• ❤️ Interoperable with WhitestormJS and Three.js – Work with both libraries side-by-side

Featured Projects

Contributing

Here’s how you can contribute to Whs.js:

1. Fork the repository and create your feature branch: git checkout -b feature/my-feature.
2. Make your changes and commit them: git commit -m 'Add my feature'.
3. Push to your branch: git push origin feature/my-feature.
4. Open a pull request to the develop branch.

Please make sure your code passes all tests by running:

npm test

External Modules

Name	Status	Description
physics-module-ammonext		Physics module based on Ammo.js

Donate

Backers

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