JQuery for Three.js and Physi.js
Features
Simple shape crafting — We use JSON-like structure for creating objects by inputed data and adding them to 3d world.
Physics with WebWorkers — It uses Physi.js library for calculating physics of 3D shapes with WebWorkers technology that allows to make rendering an calculating physics in multiple threads.
Plugin system — Framework supports plugins & components made by other users. You need to include them after whitestorm.js and follow provided instructions.
Automatization of rendering — Framework does rendering automatically and doesn't need function to be called for it. Functionality like
resize
function can be called automatically by setting additional parameters such asautoresize: true
.
Installation
It is advised to download your own copies of the following libraries, as large changes can break backwards compatibility.
Include Three.js and Physi.js libraries.
Include a script tag linking the WhitestormJS library in your head
or after your body
:
<script src="three.js"></script>
<script src="physi.js"></script>
<!-- WhitestormJS library -->
<script src="{path_to_lib}/whitestorm.js"></script>
After adding these libraries, you can configure your app:
var world = new WHS.World({
stats: "fps", // fps, ms, mb or false if not need.
gravity: { // Physic gravity.
x: 0,
y: -100,
z: 0
},
path_worker: 'physijs_worker.js', // Path to Physijs worker here.
path_ammo: 'ammo.js' // Path to Ammo.js from Physijs worker.
});
// Define your scene objects here.
world.start(); // Start animations and physics simulation.
Structure
Examples:
- FPS (First person example with Wagner effects and terrain.)
- Basic (Basic "Hello world!" example.)
- Material (Basic example with material.)
- Object/Model (Teapot model with Three.js JSONLoader.)
- Object/Wall (Stone wall (basic).)
- Plugin/Color (Basic plugin example.)
- Skybox (Skybox example)