https://github.com/unconed/CSS3D.js

CSS 3D renderer for Three.js.
https://github.com/unconed/CSS3D.js

Last synced: 14 days ago
JSON representation

CSS 3D renderer for Three.js.

• Host: GitHub
• URL: https://github.com/unconed/CSS3D.js
• Owner: unconed
• License: mit
• Created: 2012-02-19T07:24:25.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2012-11-22T12:33:51.000Z (almost 12 years ago)
• Last Synced: 2024-07-31T19:41:32.374Z (3 months ago)
• Language: JavaScript
• Homepage: http://acko.net/blog/making-love-to-webkit/
• Size: 274 KB
• Stars: 366
• Watchers: 18
• Forks: 56
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

• awesome-web-effect - CSS3D.js - This experimental renderer was built for the design of Acko.net. It lets you manage simple CSS 3D objects using Three.js. (🚀 A series of exquisite and compact web page cool effects / Css 3D Effect)
• fucking-awesome-web-effect - CSS3D.js - This experimental renderer was built for the design of Acko.net. It lets you manage simple CSS 3D objects using Three.js. (🚀 A series of exquisite and compact web page cool effects / Css 3D Effect)

README

        
CSS3D.js

========

by Steven Wittens

![CSS 3D renderer](https://raw.github.com/unconed/CSS3D.js/master/css3d.png)

#### CSS 3D renderer for Three.js ####

__Note: this library is mostly obsolete now that Three.js has its [own CSS 3D renderer](http://mrdoob.github.com/three.js/examples/css3d_molecules.html) which is integrated in a cleaner fashion.__

This experimental renderer was built for the design of [Acko.net](http://acko.net/blog/making-love-to-webkit). 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:

```javascript

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](https://github.com/unconed/CSS3D.js/blob/master/LICENSE.txt).