XO code style NPM Version Build Status Known Vulnerabilities Discord

Framework for developing 3D web apps

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)

  • 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.

• 💎 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

$ npm install --save whs

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

Full documentation of guides and APIs are located at here.

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

Author Contributor Contributor Contributor Contributor Contributor Contributor Contributor Contributor

forthebadge