Framework for developing 3D web apps

Showcases

You can find lots of examples at showcases.

Why?

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

  • Native three.js: you will need to setup: scene, renderer, camera, make an animate() function before making the actual app.
  • Whitestorm.js: all those values are filled with defaults, you just need to define your own values only if they differs from defaults.

• 💣 Adding physics is hard.

  • Other frameworks: 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: All this can be done automatically.

• 🔌 Components & plugins

  • Other: Unknown yet.
  • Whitestorm.js: It provides ability to create your own components using framework's tools. (You can add a component like WHS.Box or WHS.PointLight but for creating a terrain (WHS.Terrain) / aquarium (WHS.Aquarium) / car (WHS.Car) / any other with specific merhods and scripts.
  • See Component system in interactive 3D of web article for more info.

---

Features

• 💎 Simple in usage
• Minimize 3D scene prototyping
• 🔌 Component based scene graph
• 💣 Integrated high performance physics with Worker (Multithreading)
• Automatization of rendering
• Enhanced softbodies
• 🆕 ES2015+ based
• Extension system (plugins)
• Dynamic geometry update
• asm.js acceleration
• Webpack friendly
• ✔️ Integrated Three.js rendering engine
• Work with Whitestorm.js and Three.js at the same time

Installation

NODE

$ npm install --save whs

WEBPACK

See WhitestormJS/test-whitestorm-webpack for more details.

Documentation

Full documentation of guides and APIs are located at here.

Usage

const world = new WHS.World({
    stats: "fps", // fps, ms, mb or false if not need.
    autoresize: "window",

    gravity: [0, -100, 0], // Physic gravity.

    camera: {
      position: {
        z: 50 // Move camera.
      }
    }
});

const sphere = new WHS.Sphere({ // Create sphere comonent.
  geometry: {
    radius: 3
  },

  mass: 10, // Mass of physics object.

  material: {
    color: 0xffffff, // White color.
    kind: 'basic' // THREE.MeshBasicMaterial
  },

  position: [0, 10, 0]
});

sphere.addTo(world);
console.log(sphere.native); // Returns THREE.Mesh of this object.

world.start(); // Start animations and physics simulation.

Playground!

Contributors