Create 3D Web Apps & Graphics with Whitestorm.js

Web games have come a prolonged approach interjection to WebGL and related HTML5 APIs. The many distinguished open source library for 3D is Three.js.

While Three.js is powerful, it’s also complex to learn from scratch. Instead, we can pick adult Whitestorm.js, an open source horizon done for 3D web graphics. It uses Three.js as an underlying record to assistance we build faster and emanate picturesque 3D effects in a browser.

Whitestorm comes with a own production engine built on tip of Three.js rendering. This lets we emanate realistic gravity and other identical effects where objects interact respond to any other.

example whitestorm 3dexample whitestorm 3d

And Whitestorm is completely modular, so we have full control over that facilities get installed into a page. It uses a Bullet Physics library ported into JavaScript for full support on a web.

Here’s a simple dash of formula that creates a new Three.js environment regulating Whitestorm.

const app = new WHS.App([
  new WHS.app.ElementModule(), // insert 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

You can naturally add your possess modules and even create plugins/components built off a default library. The JS formula supports ECMAScript 6 and should support all arriving changes to a language.

Geometry, physics, and motion all rolled into one library. Whitestorm unequivocally is a destiny of 3D animation for a web.

You can find lots of representation codes in a GitHub repo along with download links and a file browser. Be warned a library is huge so there’s a lot to go through. Even a support has lengthy tutorials for beginners.

But with those docs, we can learn all from 3D transforms to debugging and detailed 3D animation.

3d orbiting planets3d orbiting planets

To learn more, revisit a main site and crop by some live examples to see Whitestorm in action. If you’re adventurous adequate to dive in, afterwards download a duplicate of a library from GitHub or via npm and start formulating some honeyed 3D web apps.

Add Comment