JavaScripting

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


  • ×

    Whitestorm.js

    WhitestormJS physics + rendering of 3D
    Filed under  โ€บ 

    • 🔾73%Overall
    • 4,325
    • 17 hours
    • 🕩268
    • 👥6

    Three Build Status

    Community chat. Join us!

    Discord

    Table of content

    Basic setup

    Download the minified library or link the one from CDN

    <script src="js/three.min.js"></script>
    <script src="js/whs.min.js"></script>
    

    The code below makes a WHS.App instance which handles all your modules and components for better work with WebGL. This one creates a scene, camera and renderer - we add the following modules to the App.

    const app = new WHS.App([
      new WHS.ElementModule(), // Apply to DOM.
      new WHS.SceneModule(), // Create a new THREE.Scene and set it to app.
    
      new WHS.DefineModule('camera', new WHS.PerspectiveCamera({ // Apply a camera.
        position: new Vector3(0, 0, 50)
      })),
    
      new WHS.RenderingModule({bgColor: 0x162129}), // Apply THREE.WebGLRenderer
      new WHS.ResizeModule() // Make it resizable.
    ]);
    
    app.start(); // Run app.
    

    NPM

    # Install npm version
    $ npm install whs
    

    NPM Version

    http://abdaily.surge.sh/4/

    http://abdaily.surge.sh/3/

    http://abdaily.surge.sh/2/

    http://abdaily.surge.sh/1/

    http://theroguepixel.com/

    http://supertiny.agency/

    https://alexbuzin.me/

    https://spatial.100shapes.com/

    http://plateaux.space/

    Features

    • ๐Ÿ’Ž Simple in usage
    • :rocket: Speeds up 3D scene prototyping
    • ๐Ÿ”Œ Component based scene graph
    • ๐Ÿ’ฃ Simple integration of any high performance physics even with Worker (Multithreading)
    • :dizzy: Automatization of rendering
    • ๐Ÿ†• ES2015+ based
    • :large_blue_diamond: Extension system (modules)
    • :package: Webpack friendly
    • โœ”๏ธ Integrated Three.js rendering engine
    • :revolving_hearts: Work with whs.js and Three.js at the same time

    External Modules

    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-module-ammonext physics-ammonext-npm Physics module based on Ammo.js
    whs-module-audio WIP Audio module for 3D positional sound ๐Ÿ”‰
    whs-vrkit physics-ammonext-npm Module for Virtual Reality

    OpenCollective Backers OpenCollective Sponsors

    Backers

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

    Show All