Simple 3VG 3D engine

Simple 3VG 3D engine

3D Engine based on Flash tutorial "3D Engine for Dummies" by KStor. This 3D engine is very limited in that the x,y,z coordinates for the objects points stored in their arrays are updated via Javascript during every move.

The objects rotate on x,y,z axis around the 0,0,0 center point.SVG and Javascript are not really suited for CPU intensive 3D (there are other languages which do the job faster) but it can still be done.

NOTE: SVG is not really 3D graphics so only wireframe models are worth considering. We have no tools to deal with solid faces. It is also important to note that we only storíng 3d data in javascript arrays and then only representing the 3d space on a 2 dimensional plane.

Some Screenshots in action using Adobe SVG 3 Plugin on Safari. Note: The svg in this screenshot works in firefox 3.0

SVG 11 - Simple 3D engine - myUrl() array holds link and it 3D position, myLink define relationship (line) between links. Rotations on x,y,z axis speeded up, incrementing 4 instead of 1.

Rotations about XYZ axis

function rotateXaxis(mysin, mycos){ 	
var tmp; 
for(i in myUrl){ 	
	tmp = (mysin * myUrl[i].y) + (mycos * myUrl[i].z); 	
	myUrl[i].y = (mycos * myUrl[i].y)  - (mysin * myUrl[i].z); 
	myUrl[i].z = tmp; 
	} 
}
 
 function rotateYaxis(mysin, mycos){ 
	var tmp; 	
for(i in myUrl){ 	
	tmp = - (mysin * myUrl[i].x) + (mycos * myUrl[i].z) 
	myUrl[i].x = (mycos * myUrl[i].x)  + (mysin * myUrl[i].z); 
	myUrl[i].z = tmp; 	
} 
}
 
 function rotateZaxis(mysin, mycos){ 
	var tmp; 
	for(i in myUrl){ 	
	tmp = (mysin * myUrl[i].x) + (mycos * myUrl[i].y) 		
myUrl[i].x = (mycos * myUrl[i].x)  - (mysin * myUrl[i].y); 		
myUrl[i].y = tmp; 
}
 } 
 

Translation of 2 sets of 3D coordinates to produce a 2D line

function renderWorld(){ 	
 	var i; 
	var line; 
	var link; 
	var textBlock;
 	var textlink; 
	var u1, Dx1, Dy1;
 	var u2, Dx2, Dy2;
 
 	var depth = zoom * (eyez - maxzoom) / 100 + eyez; 
 
for(i in myLine){ 	 
	u1 = (depth - eyez)/(myPoint[myLine[i].p1].z - eyez);
 	Dx1 =  (u1 * myPoint[myLine[i].p1].x) + centerx; 	
	Dy1 =  (u1 * myPoint[myLine[i].p1].y) + centery; 	
 
u2 = (depth - eyez)/(myPoint[myLine[i].p2].z - eyez); 
	Dx2 =  (u2 * myPoint[myLine[i].p2].x) + centerx; 
	Dy2 =  (u2 * myPoint[myLine[i].p2].y) + centery; 
 
line = svgDocument.createElement("line"); 	
	line.setAttribute("id", i); 	
	line.setAttribute("x1", Dx1); 	
	line.setAttribute("y1", Dy1); 	
	line.setAttribute("x2", Dx2); 	
	line.setAttribute("y2", Dy2); 	 
	line.setAttribute("stroke", "#FFFFFF"); 
	line.setAttribute("opacity", "0.5"); 	
 
svgDocument.getElementById("world").appendChild(line); 	
 	textBlock = svgDocument.createTextNode(myLine[i].link); 
	textlink = svgDocument.createElement("text"); 
 
textlink.setAttribute("id", "link" + i); 	 
		textlink.setAttribute("x", Dx2); 
		textlink.setAttribute("y", Dy2); 	
	textlink.setAttribute("fill", "#FFFFFF"); 	
 		textlink.setAttribute("font-size", "12"); 
		textlink.appendChild(textBlock); 	 
		svgDocument.getElementById("world").appendChild(textlink); 	
 
	} 
 
 }