https://github.com/hacksalot/extrovert.js

Extrude HTML content and arbitrary data to 3D.
https://github.com/hacksalot/extrovert.js

Last synced: 3 months ago
JSON representation

Extrude HTML content and arbitrary data to 3D.

• Host: GitHub
• URL: https://github.com/hacksalot/extrovert.js
• Owner: hacksalot
• License: other
• Created: 2015-05-22T11:16:43.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T19:20:42.000Z (about 2 years ago)
• Last Synced: 2024-10-14T12:48:01.960Z (3 months ago)
• Language: JavaScript
• Homepage: http://deskchained.com/projects/extrovert
• Size: 1.26 MB
• Stars: 16
• Watchers: 4
• Forks: 5
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Extrovert.js #

**Extrovert.js transforms HTML images and markup into textured 3D objects

directly on the web page.** It supports physics, animations, cross-browser

rendering, and basic mouse and keyboard controls. It's intended for 3D display,

in the browser, of everything from `` tags to on-page markup to custom data

such as the text of Sun Tzu's *Art of War*.

![](assets/extrovert_photo3d_thumb.jpg)

![](assets/extrovert_artofwar_thumb.png)

![](assets/extrovert_xkc3d_thumb.jpg)

![](assets/extrovert_cards_thumb.png)

## License ##

Extrovert.js is permissively licensed under MIT. See [LICENSE.md](LICENSE.md)

for details.

## Features ##

- **Create complex, data-driven 3D scenes** using Extrovert's system of

customizable generators, rasterizers, adapters, and left-handed spin-widgets.

- **Extrude HTML/DOM content into three dimensions**, optionally preserving

the on-screen location of 3Dified elements.

- **3Dify arbitrary data including XML, JSON, RSS**, or any other format. If

you can access it with JavaScript, you can render it with Extrovert.

- **Smash your data into other data with pluggable physics support** with

collisions, gravity, constraints, etc.

- **Let your users navigate the scene with optional mouse and keyboard

controls** mappable to translation or rotation around the major axes.

- **Only crashes in certain browsers!** with degradable WebGL, Canvas, and CSS3

rendering.

- **Perspective and orthographic camera** support.

- **Multiple script loader formats** for maximum possible compatibility /

confusion with modern script loaders including Require.js and Browserify.

- **Automated tests** through QUnit and Mocha...are forthcoming!

- **No jQuery dependency**. Extrovert is jQuery-compatible, but doesn't require

jQuery.

Extrovert is actively developed and maintained from our underground jungle

laboratory. [Contributions are welcome!](CONTRIBUTE.md).

## Quick Start ##

The quickest way to get started with Extrovert is to link to the sources.

Extrovert also supports AMD/CommonJS script loaders like Require.js or

Browserify.

1. Download the Extrovert sources manually or via Bower:

    ```bash

    bower install extrovert

    ```

2. Link to the sources in your HTML.

    ```html

    

    ```

3. Initialize the Extrovert library:

    ```javascript

    extrovert.init('#target', { /* options */ });

    ```

    If you're using jQuery, you can access Extrovert like this:

    ```javascript

    $('#target').extrovert({ /* options */ });

    ```

4. Voila. Insta-3D. Go forth, and annoy thy users.

## Generators ##

Extrovert.js is built around the concept of generators. A *generator* is a piece

of self-contained JavaScript code that generates 3D geometry according to a

creative scheme or blueprint. Extrovert exposes the following built-in

generators (and you can build your own):

- **extrude**. A generator that positions 3D objects based on their 2D screen positions.

- **direct**. A generator that positions 3D objects based on their 2D screen positions.

- **book**. A generator that creates "pamphlet" or "book" geometry from longform text content.

- **tile**. A generator that tiles 3D objects in space (like a brick wall).

- **stack**. A generator that stacks 3D objects in space (like a deck of cards).

- **box**. A generator that renders its data to the six sides of a cube.

- **river**. A generators that positions 3D objects in a constrained channel and gives them velocity.

- **custom**. You can create custom generators for Extrovert with just a few lines of code.

You can mix and match multiple generators within a single Extrovert scene. For

example, here we're using the `extrude` generator to extrude any on-page images,

and a `box` generator to turn a background div into a flat plane.

```javascript

extrovert.init('#target', {

  transforms: [

    { type: 'extrude' src: 'img' },

    { type: 'box' src: '#background' }

  ]

});

```

If a particular generator doesn't have the functionality you need, you can wire

together multiple generators, create your own new generators, or modify the

behavior of any existing generator.

## Rasterizers ##

A rasterizer is a self-contained piece of JavaScript code that renders arbitrary

data to a 2D texture. Where generators create the 3D geometry that fills your

scene, rasterizers create the textures, colors, and patterns that 3D geometry is

decorated with.

As with generators, Extrovert ships with multiple built-in rasterizers, and as

with generators, you can write your own. As of v1.0 the predefined rasterizers

include:

- **img**. A rasterizer specifically for image resources.

- **elem**. A rasterizer for arbitrary HTML elements (`
`, ``, `
`, whatever).

- **plain-text**. A rasterizer for plain unadorned text.

- **plain-text-stream**. A *streaming* rasterizer for longform text of arbitrary length.

- **html**. A full-fledged HTML rasterizer. Experimental.

- **custom**. You can define new rasterizers with just a few lines of code.

Short of writing a full-fledged rasterizer, you can also provide a rendering

callback function that will allow you to perform the rasterization through

simple canvas-style paint calls.