3d tutorial part one: wire frame
You know those days when you get really bored?
This is one of those days for me… So I decided to throw together this little tutorial on 3d wire frames.
Something you should know: I did not steal this tutorial, nor did I steal the .fla for it. I did read part of one of -dELta-‘s tutorials, but I got bored and made this engine from scratch over the course of about 15ish hours?.
If you know about matrixes and such feel free to visit -dELta-‘s tutorials:
http://www.newground../topic.php?id=323444
And
http://www.newground../topic.php?id=323755
Otherwise read on.
AS main:
http://www.newground..d=229808&page=45
Theoryish stuff:
Okay. The first thing that you need to know about 3d is how things are positioned. On a plane in 3d space (polygon) you have coordinates where the edges meet (vertices-these things only exist in computers and our heads in case you didn‘t know). In 3d space each vertice has 3 coordinates, one for each axis x, y ,z (I am not going to explain this, this tutorial is not for complete n00bs)
http://web.mit.edu/w..rc/3d/cart-proj.gift
Now with perspective:
The farther away something is the smaller it is. Period. Because things get smaller as they get farther away things that are parallel to one another will slope together.
http://pcssd.org/nwo..0perspective%201.jpg
We are looking at a 3d world through a 2d plane (monitor), so we have to convert 3d coordinates into 2d coordinates.
I couldn’t find a good image so imagine squishing a cube against a plane
We will be looking through the x, z plane (I don‘t care if it is usually x, y -now y is depth not height), so we have to scale things like this:
http://img348.images..348/9678/tut11sc.jpg
http://img336.images..336/7294/tut24si.jpg
http://img336.images..336/7236/tut39yz.jpg
Picture the same sort of y-transform for the z, y axis
x, z is not necessary since that is the plane we are looking through.
I did my perspective a bit oddly, there are many ways, they are all very easy. Chose the one that looks best.
Now onto the coding!:
The complete Code:
_x = 200;
_y = 200;
post = new Array();
post = ["p", 0, 2, 3, 0, "p", 0, 2, 1, 0, "p", 1, 2, 4, 1, "p", 4, 2, 3, 4];
vectorx = new Array();
vectorx = [0, 0, 50, 100, 100];
vectory = new Array();
vectory = [1100, 1200, 1150, 1100, 1200];
vectorz = new Array();
vectorz = [0, 0, -50, 0, 0];
var infinity:Number = 10000;
var slope:Number = 0;
var rotXY:Number = 0;
var rotZY:Number = 0;
var xplus:Number = 0;
var yplus:Number = 0;
var zplus:Number = 0;
var neg:Number = 0;
var drawit:Boolean = true;
getScalerX = function () {
newPostXR = (150/vectory[i]);
xpostr.push(vectorx[i]*newPostXR);
};
getScalerZ = function () {
newPostZR = (150/vectory[i]);
zpostr.push(vectorz[i]*newPostZR);
};
getRotXY = function () {
delete (xpostr);
xpostr = new Array();
for (i=0; i<vectorx.length; i++) {
if (vectorx[i] == 0) {
vectorx[i] = 0.0001;
}
if (vectory[i] == 0) {
vectory[i] = 0.0001;
}
hyp = Math.sqrt((vectorx[i]*vectorx[i])+(vectory
[i]*vectory[i]));
angle = Math.atan(vectory[i]/vectorx[i])/(Math.PI/
180);
if (vectory[i]<0 && vectorx[i]<0 or vectory[i]>0 && vectorx[i]<0) {
angle += 180;
}
newY = hyp*(Math.sin((rotXY+angle)*(Math.PI/180))
);
newX = hyp*(Math.cos((rotXY+angle)*(Math.PI/180))
);
vectorx[i] = newX;
vectory[i] = newY;
getScalerX();
}
};
getRotZY = function () {
delete (zpostr);
zpostr = new Array();
for (i=0; i<vectorx.length; i++) {
if (vectorz[i] == 0) {
vectorz[i] = 0.0001;
}
if (vectory[i] == 0) {
vectory[i] = 0.0001;
}
hyp = Math.sqrt((vectorz[i]*vectorz[i])+(vectory
[i]*vectory[i]));
angle = Math.atan(vectory[i]/vectorz[i])/(Math.PI/
180);
if (vectory[i]<0 && vectorz[i]<0 or vectory[i]>0 && vectorz[i]<0) {
angle += 180;
}
newY = hyp*(Math.sin((angle+rotZY)*(Math.PI/180))
);
newZ = hyp*(Math.cos((angle+rotZY)*(Math.PI/180))
);
vectorz[i] = newZ;
vectory[i] = newY;
getScalerZ();
}
};
getMove = function () {
if (Key.isDown(Key.UP)) {
yplus = -3;
} else {
if (Key.isDown(Key.DOWN)) {
yplus = 3;
} else {
yplus = 0;
}
}
if (Key.isDown(Key.RIGHT)) {
xplus = -3;
} else {
if (Key.isDown(Key.LEFT)) {
xplus = 3;
} else {
xplus = 0;
}
}
if (Key.isDown(90)) {
zplus = 3;
} else {
if (Key.isDown(88)) {
zplus = -3;
} else {
zplus = 0;
}
}
if (Key.isDown(65)) {
rotXY = 1;
} else {
if (Key.isDown(83)) {
rotXY = -1;
} else {
rotXY = 0;
}
}
for (i=0; i<vectory.length; i++) {
vectorx[i] += xplus;
vectory[i] += yplus;
vectorz[i] += zplus;
}
};
getWire = function () {
startoff = 0;
for (ii=0; ii<post.length; ii++) {
if (post[ii] == "p") {
startoff++;
drawit = true;
delete (poly);
poly = new Array();
for (neg=(ii+1); neg<(ii+4); neg++) {
trace(vectory[post[neg]]);
if (vectory[post[neg]]<0) {
drawit = false;
}
}
_root["square"+startoff].removeMovieClip()
;
_root.createEmptyMovieClip("square"+starto
ff, startoff);
with (_root["square"+startoff]) {
lineStyle(2, 0x000000, 100);
moveTo(xpostr[post[ii+1]], zpostr[post[ii+1]]);
}
}
if (post[ii] !== "p") {
with (_root["square"+startoff]) {
if (drawit) {
lineTo(xpostr[post[ii]], zpostr[post[ii]]);
}
}
}
}
};
onEnterFrame = function () {
getMove();
getRotXY();
getRotZY();
getWire();
};
don't get overwhelmed, everything is explaned below in the next post. If you copy that code and paste it in flash you will get a pyramid that can be controled with the arrow keys, A,S,Z,X.
If it does not work something is wrong with your flash compiler/you have and earlier version than flash 8.