doctordisco / whitestorm.js Goto Github PK

<p align="center"><i><b>Framework for developing 3D web apps. <a href="https://raw.githubusercontent.com/WhitestormJS/whitestorm.js/cece6dacfbbc7ee158ca86b782521da65c44c6e7/build/whitestorm.js" download>Physics version</a><sup>[2.86 Mb]</sup> | <a href="https://raw.githubusercontent.com/WhitestormJS/whitestorm.js/dev/build/whitestorm.light.js" download>Light version</a><sup>[1.00 Mb]</sup>(no physics engine).</b></i></p>
<p align="center"><b>*</b>Made <b>by people</b> who want to create <b>awesome</b> browser games</p>

npm install whitestormjs

bower install whitestormjs

Include a script tag linking the WhitestormJS library in your head or after your body:

<script src="{path_to_lib}/whitestorm.js"></script>

After adding the library, you can configure your app.

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

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

    gravity: { // Physic gravity.
        x: 0,
        y: -100,
        z: 0
    },
    
    camera: {
      z: 50 // Move camera.
    }
});

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

  mass: 10, // Mass of physics object.

  material: {
    color: 0xffffff,
    kind: 'basic'
  },

  pos: {
    x: 0,
    y: 100,
    z: 0
  }
});

sphere.addTo(world);
sphere.getNative(); // Returns THREE.Mesh of this object.

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

import * as THREE from 'three';

// Basic component class.
import {Component} from 'whitestormjs/core/Component';
// Decorator for THREE.Mesh for component class.
import MeshComponent from 'whitestormjs/core/MeshComponent';
// Some utils that should help.
import {extend, loadMaterial} from 'whitestormjs/utils/index';

@MeshComponent
class BasicSphere extends Component {
  constructor(params = {}) {
    super(params, BasicSphere.defaults);

    extend(params, {
      myParameter: 10 // Default for myParameter. (Sphere radius)
    });

    if (params.build) { // params.build is "true" by default. (@MeshComponent)
      this.build(params);
      // Apply position & rotation, scale ...
      super.wrap();
    }
  }

  build(params = {}) {
    // Load THREE.Material from properties.
    const material = loadMaterial(params.material);

    return new Promise((resolve) => {
      this.native = new THREE.Mesh(
        new THREE.SphereGeometry(params.myParameter, 16, 16),
        material
      );

      resolve();
    });
  }

  clone() {
    return new Sphere({build: false}).copy(this);
  }
}

export {
  BasicSphere
};

• Simple shape crafting — We use a JSON-like structure for creating objects from inputted data and adding them to your 3D world.

• Physics with WebWorkers — We use the Physi.js library for calculating physics of 3D shapes with WebWorkers technology that allows for rendering and calculating physics in multiple threads.

• Plugin system — Our framework supports plugins & components made by other users. You need to include them after whitestorm.js and follow provided instructions.

• Automatization of rendering — Our framework does rendering automatically and doesn't need a to be called. Functionality like the resize function can be called automatically by setting additional parameters such as autoresize: true.

• ES6 Features - Our framework is written using the latest features of ECMAScript 6 and ECMAScript 7 (beta) features and compiled with Babel.

• Softbodies - WhitestormJS is the only engine (except native ammo.js) that supports softbodies.

• Basic / Hello world (Basic "Hello world!" example.)
• Basic / Model (Basic model example.)
• Basic / Debugging (Object's debug example.)
• Basic / Extending API (Extending api example.)
• Basic / Softbody (Basic softbody implementation.)
• Basic / Three.js (Importing three.js scene to whitestormjs core.)
• Basic / Cloth (Example of softbody cloth.)
• Basic / Cloth 2 (Example of softbody cloth 2.)
• Basic / Cloth 3 (Example of softbody cloth 3.)

• Design / Saturn (Saturn planet example from: http://codepen.io/Yakudoo/pen/qbygaJ)
• Design / Easter (Easter rabbit with easter eggs.)
• Design / Points (Using WHS.Points to make a point cloud shaped in cube.)

• FPS / Shooter (First person example with Wagner effects and terrain. + fog) [TODO]
• FPS / Fog (First person game with animated objects) [TODO]

• Physics / Dominos (Physics example with dominos.)

• Performance / Sticks (Collisions performance of 320 basic box objects.)
• Performance / Softbodies (Collisions performance of 30 softbody icosahedron objects.)