Framework for developing 3D web apps
Contributors welcome! :P Contact me
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.
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
- Three.js: you will need to setup: scene, renderer, camera, make an
-
💣 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:
- 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 (
-
🔌 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 currently in progress. 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
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 | WhitestormJS module for JavaScript Performance Monitor ⚡⌛ | |
whs-module-dat.gui | User Interface for runtime editing properties 🔑 🛠 🔩 |
Physics
Name | Status | Description |
---|---|---|
physics-module-ammonext | Physics module based on Ammo.js |
Integrations
Name | Status | Description |
---|---|---|
react-whs | 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 🔭.