JavaScripting

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


  • ×

    Whitestorm.js

    WhitestormJS physics + rendering of 3D
    Filed under  β€Ί 

    • 🔾68%Overall
    • 3,234
    • 7 hours
    • 🕩145
    • 👥5

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

    OpenCollective Backers OpenCollective Sponsors

    Framework for developing 3D web apps

    Development chat - opens in discord app. Ask for help here;)

    Support the project - [Donate] buy developers a β˜•

    $ npm install --save whs
    

    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)

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


    Download

    CDN

    Proudly hosted by cdnjs:D (soon)

    Features

    • πŸ’Ž 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

    WEBPACK

    Use whitestorm-app-boilerplate

    Documentation

    Documentation for beta is not yet released. Contact developers in discord chat

    Basic application

    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
    

    React integration

    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>
        )
      }
    }
    

    Modules

    Devtools

    Name Status Description
    whs-module-statsjs statsjs-npm WhitestormJS module for JavaScript Performance Monitor βš‘βŒ›
    whs-module-dat.gui datgui-npm User Interface for runtime editing properties πŸ”‘πŸ› πŸ”©

    Physics

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

    Integrations

    Name Status Description
    react-whs react-whs-npm Integration with ReactJS

    Backers

    Support us with a monthly donation and help us continue framework developmentπŸŽ‰ and adding new featuresπŸ’‘πŸŽ.

    Sponsors

    Become a sponsor and get your logo on on our README on Github with a link to your websiteπŸ”­.

    Sponsors

    forthebadge

    Show All