Raphaël3d

Extension of Javascript vector graphics library Raphaël for basic 3d graphics.

Raphaël3d is an extending library to JavaScript vector graphic library Raphaël created for basic 3d graphics. With this extension, you can easily create and manage 3d-like objects in your web (JavaScript) vector graphics applications (like here). Just download the raphael3d.js file and place it into your HTML document. The raphael.js file has to be loaded first. The usage is very simple:


var paper = Raphael('div-raphael',400,400); 

var scene = new Raphael3d.Scene(paper,{visMethod:1}); 

var axes = Raphael3d.AxesCross(0,0,0,2,2,2,paper,{'stroke-width':2}); 

var v0 = axes.vertices[0]; 

var vx = new Raphael3d.Vertex(1,0,0); 

var vy = new Raphael3d.Vertex(0,1,0); 

var vz = new Raphael3d.Vertex(0,0,1); 

var vxy = new Raphael3d.Vertex(1,1,0); 

var vyz = new Raphael3d.Vertex(0,1,1); 

var vzx = new Raphael3d.Vertex(1,0,1); 

var vxm = new Raphael3d.Vertex(-1,0,0); 

var vym = new Raphael3d.Vertex(0,-1,0); 

var vzm = new Raphael3d.Vertex(0,0,-1); 

var vxym = new Raphael3d.Vertex(-1,-1,0); 

var vyzm = new Raphael3d.Vertex(0,-1,-1); 

var vzxm = new Raphael3d.Vertex(-1,0,-1); 

var e1 = new Raphael3d.Edge(vx,vxy,paper,{'stroke-width':6,stroke:'#f00'}); 

var e2 = new Raphael3d.Edge(vy,vyz,paper,{'stroke-width':6,stroke:'#0f0'}); 

var e3 = new Raphael3d.Edge(vz,vzx,paper,{'stroke-width':6,stroke:'#00f'}); 

var f1 = new Raphael3d.Face([vxy,vyz,vxm],paper,{'fill':'#0ff'}); 

var f2 = new Raphael3d.Face([vxy,vzx,vym],paper,{'fill':'#ff0'}); 

var mat = new Raphael3d.Material('#f0f'); 

var s1 = new Raphael3d.Surface.Box(0,0,.3,.5,.5,.5,paper,{}).setMaterial(mat); 

var s2 = new Raphael3d.Surface.Tetrahedron(-.5,-.5,0.,.5,.5,.5,paper,{}).setMaterial(mat); 

scene.addEdges(axes.edges); 

scene.addEdges(e1,e2,e3); 

scene.addFaces(f1,f2); 

scene.addSurfaces(s1,s2); 

scene.projection = Raphael3d.Matrix4x4.PerspectiveMatrixZ(500); 

var viewer = paper.Viewer(25,25,350,350,{opacity:.1}); 

viewer.setScene(scene).fit() 

scene.camera.rotateY(-2.5).rotateX(-.5).rotateZ(-.8); 

viewer.update();

Raphaël3d is a free software distributed under GNU LGPL license.

Currently implemented features:

Mathematical support (Vector3, Matrix4x4),
Basic geomtric entities (Vertex, Edge, Face, Surface),
Parallel and perspective projections,
Robust visibility algorithm,
and other ...

See documentation and/or examples for more information.