Skip to content
A CSS-based 3D graphics library
JavaScript CoffeeScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Updated the version number Mar 8, 2014
docs Renamed clearAnimation to clearAnimations Sep 5, 2012
examples typo fix Nov 10, 2013
src Updated the version number Mar 8, 2014
test Replaced the deprecated APIs of quint Mar 8, 2014
CHANGELOG.md Updated the version number Mar 8, 2014
Cakefile Changed to only build the minified version Sep 4, 2012
LICENSE Added linefeeds Apr 9, 2012
README.md Modified Sep 4, 2012

README.md

DivSugar

DivSugar is a CSS-based 3D graphics library, which provides a 3D scene graph, an animation system, and geometry classes. Each node of the scene graph is an extended div element, so it is very easy to integrate 3D animations into existing web pages.

DivSugar depends on CSS 3D transforms and runs on Safari, Chrome, and Firefox for now.

Getting Started

Include divsugar.js, then all of the functions get available via the DivSugar global variable.

<script src="divsugar.js"></script>

A Scene is the root of a scene graph and specifies the rendering area. A Node is an element of a scene graph and draws an image. Both of them contain div elements as their properties.

var scn = new DivSugar.Scene()
  .setSize(800, 600)
  .setImage('#000080')
  .appendTo(document.body);

var node = new DivSugar.Node()
  .setSize(300, 300)
  .setPosition(10, 20, 30)
  .setImage('image.jpg')
  .appendTo(scn);

DivSugar provides a Task, which calls the onUpdate method of the registered Tasks in every frame. It also calls the onDestroy method when the Task is destroyed.

var task = new DivSugar.Task().appendTo(DivSugar.rootTask);

task.onUpdate = function() {
  node.rotate(this.deltaTime * 0.1, this.deltaTime * 0.2, this.deltaTime * 0.3);
};

task.onDestroy = function() {
  scn.removeChild(node);
};

With the playAnimation method of a Node, it is possible to make the Task which plays a sequence of animations automatically.

node.playAnimation([
  ['to', { size: [100, 100], opacity: 0 }, 500, DivSugar.Ease.quadInOut],
  ['wait', 500],
  ['to', { size: [200, 200], opacity: 1 }, 1000, DivSugar.Ease.linear],
  ['play', someAnim],
  ['call', someFunc],
  ['repeat', 10]
]);

Examples

Documentaion

License

  • MIT license
You can’t perform that action at this time.