Seen.js is an awsome javascript library to create 3D shapes and 3D animations in SVG or in HTML5 Canvas. This is a standalone javascript library and have no dependencies. It is very nice and very simple to create powerfull complex 3D shapes and 3D animations in SVG or HTML5 Canvas.
Seen.js contains a simple abstraction on top of the graphics capabilities of SVG and HTML5 Canvas elements. All of the other components of this library are agnostic to the type of context it will be rendered in. However, there are some performance considerations.
Creating elements within SVG is generally much slower than drawing directly into an HTML5 Canvas.
seen.js renders 3D scenes into SVG or HTML5 Canvas.
Demos
- Materials gallery
- Noisy Wave Patch
- Noisy Sphere
- Same Scene, Canvas vs. SVG
- Same Scene, Multiple Angles
- SVG Masks and Effects
- Audio Equalizer
- N-Body Gravity Simulation
- 2048
Download Seen.js
website: http://seenjs.io
Implementation of Seen.js
Step 1. Create a web page including the seen library. Coffeescript is optional, but all the sample code (as well as the library source) is all coffeescript.
<html>
<head>
<script src="seen.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>
</head>
<body>
<svg width="400" height="400" id="seen-canvas"></svg>
<!-- OR -->
<canvas width="400" height="400" id="seen-canvas"></canvas>
<script type="text/coffeescript">
SEE BELOW
</script>
</body>
</html>Step 2. Create a scene with a single shape and render it using a context.
# Create a shape
shape = seen.Shapes.tetrahedron()
# Create scene and add shape to model
scene = new seen.Scene
model : seen.Models.default().add(shape)
viewport : seen.Viewports.center(400, 400)
# Create render context from canvas
context = seen.Context('seen-canvas', scene) # Render it!
context.render()—
Licensed under Apache 2.0
To see what is new in this version, read the release notes.
Related articles
- Seen.js Renders 3D Scenes into SVG or HTML5 Canvas (remelehane.wordpress.com)
- Getting started with inline SVG (viget.com)
- HTML5 Canvas Wrapper Libraries Based On Javascript (designresourcebox.com)
- All You Need to Know About SVG – Tutorials, Articles, Resources (onextrapixel.com)
- 36 Excellent Data Visualization Tools (smashingapps.com)
- SVG.js – A Lightweight JavaScript Library For Manipulating & Animating SVG (css.dzone.com)
- 40 Useful Javascript Tools & Resources (smashingapps.com)