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.
<!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>as simple as 1- 2- 3:
- 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"
});- 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 });
}); - 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/