3D interactive graphics jQuery plugin based on HTML5 and X3DOM
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
scene3d.jquery.js graph layout option added Jun 10, 2014


3D interactive graphics for jQuery

canvas example

SCENE3D is an 3D interactive graphics plugin for jQuery based on HTML5 and X3DOM aimed for rapid and effortless prototyping of 3D scenes for the web.

Example and usage


<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta charset="utf-8">

<script src="http://www.x3dom.org/download/x3dom.js"></script>
<link rel='stylesheet' type='text/css' href='css/x3dom.css'/>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="scene3d.jquery.js"></script>

$(function() { 
	var myCanvas = $('#3dcanvas').scene3d();
	myCanvas.addBox (); // add an object

	<div id="3dcanvas"></div>


as simple as 1- 2- 3:

  1. initialize a canvas:
// with default options
var myCanvas = $('#3dcanvas').scene3d();

// or with options of your choice
var myCanvas = $('#3dcanvas').scene3d({
	width:		"600px",
	height:		"600px",
	background:	"#eeeeee"
  1. add your 3D objects
myCanvas.addSphere({ x:1, y:0, z:2 }); 
myCanvas.addBox({ x:1, y:1, z:2, width:1, depth:1, height:1 });
myCanvas.addCone({ x:1, y:2, z:2, label:'3D Objects' });
myCanvas.addCylinder({ x:1, y:-2, z:2, radius:1, height:2,color:'#00aaff' });

or for example, use ajax calls to draw graphs from data files or databases

$.getJSON( "actors.json", function( myGraph ) {	
	myCanvas.addGraph({ data: myGraph });
  1. click, rotate, pan, zoom and more ...

Demo and more examples in "examples" folder and in http://www.livereference.org/scene3d/


This software comes with the same license as jQuery. However, x3dom has its own license. Please check at http://www.x3dom.org/