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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
LICENSE
README.md
scene3d.jquery.js graph layout option added Jun 10, 2014
scene3d.jquery.json

README.md

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

HTML

<!DOCTYPE html>
<html>
<head>
<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>

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

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

jQuery

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/

Copyright

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

Aleksandar