Creating 3D Worlds with HTML and CSS (2013)

Summary

Last year I created a demo showing how CSS 3D transforms could be used to create 3D environments. The demo was a technical showcase of what could be achieved with CSS at the time but I wanted to see how far I could push things, so over the past few months I’ve been working on a new version with more complex models, realistic lighting, shadows and collision detection. This post documents how I did it and the techniques I used. View the demo Creating 3D objects The geometry of a 3D object is stored as a collection of points (or vertices), each having an x, y and z property that defines its position in 3D space. A rectangle for example would be defined by four vertices, one for each corner. Each corner can be individually manipulated allowing the rectangle to be pulled into different shapes by moving its vertices along the x, y and z axis. The 3D engine will use this vertex data and some math to render 3D objects on your 2D screen. With CSS transforms this is turned on its head. We can’t define arbitrary shapes using a set of points. Instead, we have to work with HTML elements, which are always rectangular and have two dimensional properties such as top, left, width and height to determine their position and size. In many ways this makes dealing with 3D easier as there’s no complex math to deal with — just apply a CSS transform to rotate an element around an axis and you’re done! Creating objects from rectangles seems limiting at first but you can do a surprising amount with them, especially when you start playing with PNG alpha channels. In the image below you can see the barrel top and wheel objects appear rounded despite being made up of rectangles. An example of 3D objects built entirely from rectangular <div> elements All objects are created in JavaScript using a small set functions for creating primitive geometry. The simplest object that can be created is a plane, which is basically a <div> element. Planes can be added to assemblies, (a wrapper <div> element) al...