Creating 3D Worlds With CSS

Creating orientation controls for CSS 3D models.

CSS3D Earth by Edan Kwan

Creating 3D in the browser has been very popular in recent years. The most used 3D framework is three.js (there are several others, like babylon.js and PlayCanvas), which all use Javascript to render 3D on canvas.

There is an alternative for creating 3D objects in the browser: utilizing CSS without JS. (Keith Clark: 2013)

X-wing model by Julian Garnier

This article is about how to create 3D CSS movable objects with a splash of JavaScript.

Getting started

Include the coco.js library before the closing <body> tag:

<script src="https://unpkg.com/cocobean/coco.min.js"></script>

And add coco to an element:

document.querySelector('.scene').coco();

The coco (CSS Orientation Controls) library will allow you to move and rotate 3D objects in 3D space using arrow keys to move and mouse dragging to rotate.

Here’s the result:

X-wing with orientation controls

Yay! We did it. It can also work with React.

Adding camera controls

Now let’s create a small 3D world which contains a camera (FOV) and a 3D observed object.

Import the coco library in your HTML:

<script src="https://unpkg.com/cocobean/coco.min.js"></script>

And create a coco scene:

var element = document.querySelector('.scene');
var scene = element.coco(false);
var x = 0,
y = 0,
z = 0;
scene.camera(x, y, z);

Where x , y and z are the position of your FOV camera. For this example, the initial position of the camera is (0,0,0). You can add key bindings to move your camera around, like this:

<script>
document.addEventListener("keydown", checkKey, false);
function checkKey(e) {
if (e.keyCode == '37') { // left (left arrow key)
x += 3;
} else if ( e.keyCode == '39') { // right (right arrow key)
x -= 3;
} else if (e.keyCode == '32') { // up (space key)
y += 3;
} else if (e.keyCode == '16') { // down (down arrow key)
y -= 3;
} else if (e.keyCode == '38') { // forwards (up arrow key)
z += 3;
} else if (e.keyCode == '40') { // backwards (down arrow key)
z -= 3;
}
scene.camera(x, y, z);
}
</script>

Here’s the result:

coco scene with movable FOV camera and static object

Looks great! You’ve just created your first coco 3D scene. You can move around with arrow keys and explore the object.

Wrapping up

In this article, we created a 3D world, rendered only by CSS. Though it’s yet to be fully developed, it has it’s perks:

  • Presumably better performance than canvas rendering (MDN: 2021, CSS Tricks: 2013)
  • Redrawing is handled for you. You only specify what you want to display on the screen. The details of how to do that and how often to refresh are all left to the Graphics API to handle.
  • You can easily modify the visuals of your DOM elements using CSS and the DOM Inspector.

In my opinion, CSS3D has great potential and I hope it will be pushed to it’s full potential by the community.

Happy coding!

References

  • coco Github repository (link)
  • Examples with coco (link)
  • CSS3D Keith Clark 2013 (link)
  • XEM’s CSS3D prototypes and articles 2017 (link, link)
  • CSS animation performance MDN 2021 (link)
  • CSS animation performance CSS Tricks 2013 (link)

Getting creative.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store