Create beautiful 3D scenes with declarative HTML.
Visit the site, discuss in the forums.
Infamous gives you Custom HTML Elements that the browser understands, for defining 3D scenes.
Infamous is built on the Web Component standards, making it possible to write 3D scenes declaratively using custom HTML elements, regardless of which view layer you prefer. This makes it possible for you write 3D scenes using popular HTML frameworks like (but not limited to) React, Vue.js, Meteor, Angular, Ember.js, or even the great jQuery.
If you prefer imperative JavaScript, you can also use the JavaScript-only API.
- Imperative Seed
- The 3D scene is defined and animated with imperative JavaScript
- Rendered with CSS3D
- Declarative Seed
- The 3D scene is defined with declarative HTML
- A sprinkle of JavaScript is used for animation
- Rendered with CSS3D
- Polydance
- Presented at 3DWebFest 2017 in collaboration with Anastasiia Vedernikova
- The 3D scene is defined with declarative HTML
- The HTML is manipulated with Vue.js (source code)
- Rendered with experimental WebGL
- RippleFlip
- The 3D scene is defined with imperative JavaScript
- Rendered with CSS3D
- Geometric Rotation
- The 3D scene is defined with declarative HTML
- The HTML is manipulated with React (source code)
- Rendered with experimental WebGL
- DOM Buggy
- The 3D scene is defined with declarative HTML
- The HTML is manipulated with plain JS.
- Rendered with CSS3D
Use the "global" version of infamous via script tag in your HTML page:
<script src="https://unpkg.com/[email protected]/global.js"></script>
<script>
console.log(infamous)
// use infamous
</script>Or install from NPM:
npm install infamousconst infamous = require('infamous')
console.log(infamous)
// use infamousThe following sample workflows show possible ways to install and start using infamous using a few different build tools that are popular today.
They will all show how to make this demo: https://jsfiddle.net/trusktr/52zzLx6e.
The examples all use tween.js, a
library for animating numbers using "easing curves".
Supported browsers are Chrome, Firefox, Opera, and Edge, and basically any
browser that supports the transform-style:preserve-3d CSS property.
Make a file index.html containing the following:
<!DOCTYPE html>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://cdn.rawgit.com/trusktr/infamous/v17.0.5/global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
<motor-scene>
<motor-node
absoluteSize="200 200" align="0.5 0.5" mountPoint="0.5 0.5"
style=" backface-visibility: visible; background: pink; padding: 5px; "
>
Hello.
</motor-node>
</motor-scene>
<script>
var Motor = infamous.core.Motor
var node = document.querySelector('motor-node')
var tween = new TWEEN.Tween(node.rotation)
.to({y: 360}, 5000)
.easing(TWEEN.Easing.Elastic.InOut)
.start()
Motor.addRenderTask(now => {
tween.update(now)
})
</script>Now use File > Open in your browser to open the index.html file and see the
result.
Install Node.js, then install
browserify globally:
npm install -g "browserify@^14"Install infamous and tween.js into your project:
npm install infamous tween.js --saveMake a file app.js containing the following:
const Motor = require('infamous/core/Motor')
const Node = require('infamous/core/Node')
const Scene = require('infamous/core/Scene')
const TWEEN = require('tween.js')
const scene = new Scene
scene.mount(document.body)
const node = new Node({
absoluteSize: {x:200, y:200}, // object notation
// place it in the middle of the scene:
align: {x:0.5, y:0.5},
mountPoint: {x:0.5, y:0.5},
})
node.element.textContent = 'Hello.'
node.element.style.cssText = 'backface-visibility: visible; background: pink; padding: 5px;'
scene.addChild(node)
let tween = new TWEEN.Tween(node.rotation)
.to({y: 360}, 5000)
.easing(TWEEN.Easing.Elastic.InOut)
.start()
Motor.addRenderTask(function(timestamp) {
tween.update(timestamp)
})Make a file public/index.html containing the following:
<!DOCTYPE html>
<html>
<head>
<title>Project with infamous</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>then compile a bundle that we'll run in the browser:
browserify app.js -o public/app.jsNow use File > Open in your browser to open the index.html file and see the
result.
Install Node.js, then install
webpack globally:
npm install -g "webpack@^2"Install infamous and tween.js into your project:
npm install infamous tween.js --saveCreate a file webpack.config.js to configure webpack:
module.exports = {
entry: "./app.js",
output: {
path: './public',
filename: "app.js"
},
}Make a file app.js containing the following:
import {Motor, Node, Scene} from 'infamous/core'
import {Tween, Easing} from 'tween.js'
const scene = new Scene
scene.mount(document.body)
const node = new Node({
absoluteSize: [200, 200], // array notation
// place it in the middle of the scene:
align: [0.5, 0.5],
mountPoint: [0.5, 0.5],
})
node.element.textContent = 'Hello.'
node.element.style.cssText = 'backface-visibility: visible; background: pink; padding: 5px;'
scene.addChild(node)
let tween = new Tween(node.rotation)
.to({y: 360}, 5000)
.easing(Easing.Elastic.InOut)
.start()
Motor.addRenderTask(function(timestamp) {
tween.update(timestamp)
})Makea a file public/index.html containing the following:
<!DOCTYPE html>
<html>
<head>
<title>Project with infamous</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>then compile a bundle that we'll run in the browser:
webpackNow use File > Open in your browser to open the index.html file and see the
result.
Testing powered by:
Thanks goes to these wonderful people (emoji key):
 corruptedzulu 💻 📖 |
 Joseph Orbegoso Pea 💻 🐛 📖 💡 |
|---|
This project follows the all-contributors specification. Contributions of any kind welcome!