Create 3D Web Apps & Graphics with Whitestorm.js

By . in Toolkit. Updated on .

Web games have come a long way thanks to WebGL and related HTML5 APIs. The most prominent open source library for 3D is Three.js.

While Three.js is powerful, it’s also complex to learn from scratch. Instead, you can pick up Whitestorm.js, an open source framework made for 3D web graphics. It uses Three.js as an underlying technology to help you build faster and create realistic 3D effects in the browser.

Whitestorm comes with its own physics engine built on top of Three.js rendering. This lets you create realistic gravity and other similar effects where objects interact & respond to each other.

example whitestorm 3d

And Whitestorm is completely modular, so you have full control over which features get loaded into the page. It uses the Bullet Physics library ported into JavaScript for full support on the web.

Here’s a basic snippet of code that creates a new Three.js environment using Whitestorm.

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

You can naturally add your own modules and even create plugins/components built off the default library. The JS code supports ECMAScript 6 and should support all upcoming changes to the language.

Geometry, physics, and motion all rolled into one library. Whitestorm really is the future of 3D animation for the web.

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

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

3d orbiting planets

To learn more, visit the main site and browse through some live examples to see Whitestorm in action. If you’re daring enough to dive in, then download a copy of the library from GitHub or via npm and start creating some sweet 3D web apps.

Recommended Reading: 20 Useful 3D-Modeling Software You Can Use For Free

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail