Creating 3D Worlds With CSS
Creating orientation controls for CSS 3D models.
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)
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:
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:
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 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 its full potential by the community.
Happy coding!
