XO code style Three NPM Version Build Status PRs Welcome Coverage Status Known Vulnerabilities Discord

OpenCollective Backers OpenCollective Sponsors

Framework for developing 3D web apps

$ npm install --save whs

You can find lots of examples at showcases.

• 🤔 Because making of even a basic Three.js application requires at least ~20 lines of code (see this tutorial)

  • Three.js: you will need to setup: scene, renderer, camera, make an animate() function before making the actual app.

  • Whitestorm.js: There are modules that helps you easily setup them:

    const app = new WHS.App([
     new WHS.app.ElementModule(), // attach to DOM
     new WHS.app.SceneModule(), // creates THREE.Scene instance
     new WHS.app.CameraModule(), // creates PerspectiveCamera instance
     new WHS.app.RenderingModule() // creates WebGLRenderer instance
    ]);
    app.start(); // run animation

    See more about modules

• 💣 Adding physics is hard.

  • Three.js: To make your app run with physics you need to make a second world with same 3d objects and apply their transform (position & rotation) to your rendered scene objects (THREE.Scene for example) in every frame.

  • Whitestorm.js: Can be done with modules in a few lines:

    const app = new WHS.App([
     // Other modules...
     new PHYSICS.WorldModule()
    ]);
    const sphere = new WHS.Sphere({
     geometry: {
     radius: 3
     },
     modules: [
     new PHYSICS.SphereModule({
     mass: 10
     })
     ],
     material: new THREE.MeshBasicMaterial({color: 0xff0000}) // red material
    });
    app.start(); // run animation

    Use physics-module-ammonext as your physics module.

    Try with physics on Codepen:

• 🔌 Components & plugins

  • Three.js: You can create meshes with geometry and material.

  • Whitestorm.js: You can create components with advanced custom functionality.

    export class BasicComponent extends WHS.MeshComponent {
     build() {
     return new THREE.Mesh(
     new THREE.IcosahedronGeometry(3, 5),
     new THREE.MeshBasicMaterial({color: 0xffffff})
     )
     }
     randomize() { // Additional function
     this.position.set(Math.random() * 10, Math.random() * 10, Math.random() * 10);
     }
    }

  • See Component system in interactive 3D of web article for more info.

Proudly hosted by cdnjs:D (soon)

• 💎 Simple in usage
• Minimize 3D scene prototyping
• 🔌 Component based scene graph
• 💣 Simple integration of any high performance physics even with Worker (Multithreading)
• Automatization of rendering
• 🆕 ES2015+ based
• Extension system (modules)
• Webpack friendly
• ✔️ Integrated Three.js rendering engine
• Work with Whitestorm.js and Three.js at the same time

Use whitestorm-app-boilerplate

Documentation for beta is currently in progress. Contact developers in discord chat

Try on Codepen:

const app = new WHS.App([
 new WHS.app.ElementModule(), // attach to DOM
 new WHS.app.SceneModule(), // creates THREE.Scene instance
 new WHS.app.CameraModule({
 position: new THREE.Vector3(0, 0, -10)
 }), // creates PerspectiveCamera instance
 new WHS.app.RenderingModule(), // creates WebGLRenderer instance
 new WHS.controls.OrbitModule() // orbit controls
]);
const sphere = new WHS.Sphere({ // Create sphere comonent.
 geometry: {
 radius: 3
 },
 material: new THREE.MeshBasicMaterial({
 color: 0xffffff, // White color.
 }),
 position: new THREE.Vector3(0, 1, 0) // x: 0, y: 1, z: 0
});
sphere.addTo(app);
console.log(sphere.native); // Logs THREE.Mesh of this component
app.start(); // run animation

You can easily integrate Whitestorm.js with React using react-whs tool!

$ npm install react react-whs --save

Try with React on Codepen:

Example:

import React, {Component} from 'react';
import {App, Sphere} from 'react-whs';
export class Application extends Component {
 render() {
 return (
 <App modules={[
 new WHS.app.SceneModule(),
 new WHS.app.CameraModule({
 position: {
 z: 20
 }
 }),
 new WHS.app.RenderingModule(),
 new WHS.controls.OrbitModule()
 ]}>
 <Sphere
 geometry={[3, 32, 32]}
 material={new THREE.MeshBasicMaterial({color: 0xffffff})}
 key="1"
 />
 </App>
 )
 }
}

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

Become a sponsor and get your logo on on our README on Github with a link to your website🔭.

Sponsors

forthebadge