JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Whitestorm.js

    WhitestormJS physics + rendering of 3D
    Filed under  › 

    • 🔾65%Overall
    • 2,602
    • 17 hours
    • 🕩125
    • 👥6

    logo

    XO code style NPM Version Build Status Known Vulnerabilities Discord

    Framework for developing 3D web apps

    Showcases

    You can find lots of examples at showcases.

    basic/helloworld basic/model softbody/cloth3 postprocessing/basic-glitch softbody/ropes design/saturn

    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!

    playground

    Contributors

    Author Contributor Contributor Contributor Contributor Contributor Contributor Contributor Contributor

    forthebadge

    Show All