Raphaël3d

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

Examples (and tests at the same time)

Visibility test


var paper = Raphael('raphael-exVisibility',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();

Convex surfaces + colors


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

var mat = new Raphael3d.Material(/*diffuseColor=yellow*/'#ff0',/*ambientColor=cyan*/'#0ff');

var cube = Raphael3d.Surface.Box(0.,0.,0.,2.,2.,2.,paper,{});

var tetra = Raphael3d.Surface.Tetrahedron(3.,0.,0.,2.,2.,2.,paper,{});

var prism = Raphael3d.Surface.Prism(0.,4.,0.,1.,2.,5,paper,{});

var prism2 = Raphael3d.Surface.Prism(0.,4.,2.,1.,2.,5,paper,{});

var pyramid = Raphael3d.Surface.Pyramid(3.,4.,0.,1.,2.,6,paper,{});

var scene = new Raphael3d.Scene(paper);

scene.setMaterial(mat).addSurfaces(cube,tetra,prism,prism2,pyramid);

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

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

viewer.setScene(scene).fit()

scene.camera.rotateX(2.).rotateZ(-.2).rotateY(.5);

viewer.update();

Transparent cone


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

var mat = new Raphael3d.Material('#0ff',undefined,.5);

var cone = Raphael3d.Surface.Pyramid(3.,4.,0.,1.,2.,48,paper,{});

cone.wireframe = cone.wireframeBackface = null;

var scene = new Raphael3d.Scene(paper);

scene.setMaterial(mat).addSurface(cone);

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

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

viewer.setScene(scene).fit()

scene.camera.rotateX(2.).rotateZ(-.2).rotateY(.5);

viewer.update();

Teapot


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



var teapot1 = Raphael3d.readObjFile('../../../../software/raphael3d/teapot.obj',paper);

teapot1.scale(250,-250,-250);

teapot1.wireframeBackface = null;

var scene1 = new Raphael3d.Scene(paper).addSurface(teapot1);

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

scene1.lcs.translate(200,200,0);

scene1.camera.rotation.rotateY(.4).rotateX(.4)

viewer1.setScene(scene1).update();



var teapot2 = Raphael3d.readObjFile('../../../../software/raphael3d/teapot.obj',paper);

teapot2.scale(250,-250,-250);

var scene2 = new Raphael3d.Scene(paper).addSurface(teapot2);

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

viewer2.skipBackFace = false;

scene2.lcs.translate(200,600,0);

scene2.camera.rotation.rotateY(.4).rotateX(.4)

viewer2.setScene(scene2).update();