Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kitao/divsugar
A CSS-based 3D graphics library
https://github.com/kitao/divsugar
Last synced: about 1 month ago
JSON representation
A CSS-based 3D graphics library
- Host: GitHub
- URL: https://github.com/kitao/divsugar
- Owner: kitao
- License: mit
- Created: 2012-04-07T06:22:11.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2021-07-11T03:47:22.000Z (about 3 years ago)
- Last Synced: 2024-06-12T13:20:35.814Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 7.42 MB
- Stars: 161
- Watchers: 21
- Forks: 23
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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.
```html
```
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.
```javascript
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.
```javascript
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.
```javascript
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
--------
- 01.SimpleApplication ([demo](http://kitao.github.com/divsugar/examples/01.SimpleApplication/) | [code](https://github.com/kitao/divsugar/blob/master/examples/01.SimpleApplication))
- 02.TaskAnimation ([demo](http://kitao.github.com/divsugar/examples/02.TaskAnimation/) | [code](https://github.com/kitao/divsugar/blob/master/examples/02.TaskAnimation))
- 03.TweenAnimation ([demo](http://kitao.github.com/divsugar/examples/03.TweenAnimation/) | [code](https://github.com/kitao/divsugar/blob/master/examples/03.TweenAnimation))
- 04.LightAndBillboard ([demo](http://kitao.github.com/divsugar/examples/04.LightAndBillboard/) | [code](https://github.com/kitao/divsugar/blob/master/examples/04.LightAndBillboard))
- 05.KeyAndMouseInput ([demo](http://kitao.github.com/divsugar/examples/05.KeyAndMouseInput/) | [code](https://github.com/kitao/divsugar/blob/master/examples/05.KeyAndMouseInput))
Documentaion
------------
- [API Reference](https://github.com/kitao/divsugar/blob/master/docs)
- Tutorial ([English](https://github.com/kitao/divsugar/wiki/DivSugar-Tutorial) | [Japanese](https://github.com/kitao/divsugar/wiki/DivSugar-Tutorial-in-Japanese))
License
-------
- MIT license