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.
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.