CSS3D.js

by Steven Wittens

CSS 3D renderer for Three.js

Note: this library is mostly obsolete now that Three.js has its own CSS 3D renderer which is integrated in a cleaner fashion.

This experimental renderer was built for the design of Acko.net. It lets you manage simple CSS 3D objects using Three.js.

Functionality is very limited: only planes and lines are supported (THREE.Line, THREE.PlaneGeometry). In its current form it is nowhere near a replacement for WebGL or Canvas, and browser support is buggy at best.

However, in the right setting, CSS 3D can be a useful and impressive effect, particularly when combined with parallax scrolling. I think it shows that there is a case to be made to integrate 3D more tightly into the DOM, with arbitrary meshes and shaders. In the meantime, this library opens the door for more complicated experimentation and prototyping of 3D Web UI concepts.

I don't intend to maintain or develop this further, so forking is encouraged.

Requires: jQuery

Browser support

Currently, it only works in Chrome and Safari. Firefox doesn't seem to reliably support the necessary cascading of preserve-3d transforms.

Usage

Initialize the renderer like any other Three.js renderer, using:

var renderer = new Acko.CSS3DRenderer({
  perspective: ... // optional
});

By default, the renderer wraps itself in a CSS perspective for the camera. Use perspective to specify a custom DOM element which will receive the camera's CSS perspective instead. You can use this to link the renderer to a page-wide parallax effect. Or, specify 'false' to forego camera perspective and hardcode it yourself.

To nest the CSS 3D renderer, make sure you apply transform-style: preserve-3d as necessary.

The file css3d.css contains useful default styles.

Editor

A simple keyboard operator editor is included in editor.html. The scene is serialized into the textfield at the bottom. Copy/paste this into data.js to save it.

Controls

• Click+Drag — Orbit camera
• Enter — New object
• Space — Clone object
• Backspace — Delete object
• Tab / Shift+Tab — Cycle through objects
• WASD/QE — Move object
• Shift+WASD/QE — Resize object
• Ctrl+WASD/QE — Move camera
• [] — Lower/raise units
• ZX — Orbit distance
• T/T/U — Tag/untag/untag all

The scene editor was developed specifically for Acko.net and lacks many features (like custom colors). Colors are hardcoded in serialize.js.

© 2012 Steven Wittens - MIT License.