3D Help

[Captain_404]

Ok, so a while back I decided to challenge myself to create a working 3D engine without looking at any tutorials. I've got what I think is a pretty good prototype, but the z-axis is giving me some really odd behavior.

Here's my code (also, this is in AS2):

var magic = 180/Math.PI;
function getA(x1,y1,z1,x2,y2,z2) {
    var d = Math.sqrt((x2-x1)*(x2-x1)+(z2-z1)*(z2-z1));
    var yd = y2-y1;
    var r = Math.atan2(yd,d)*magic;
    return r;
}

function aDist(a1,a2) {
    var a = a2-a1;
    if (a > 180) a -= 360;
    else if (a < -180) a += 360;
    return a;
}

p0 = [0,0,0];
p1 = [0,100,0];
p2 = [0,0,100];
p3 = [0,100,100];
p4 = [100,0,0];
p5 = [100,100,0];
p6 = [100,0,100];
p7 = [100,100,100];
p8 = [50,50,50];

var x = 50;
var y = 50;
var z = -50;

var xa = 0;
var ya = 0;

onEnterFrame = function() {
    removeMovieClip(s);
    createEmptyMovieClip("s",1);
    
    if (Key.isDown(Key.UP)) z++;
    if (Key.isDown(Key.DOWN)) z--;
    if (Key.isDown(Key.LEFT)) x++;
    if (Key.isDown(Key.RIGHT)) x--;
    
    if (xa >= 360) xa = 0;
    else if (xa < 0) xa = 359;
    for (var n=0; _root["p"+n]; n++) {
        p = _root["p"+n];
        s.attachMovie("a","a"+n,n);
        o = s["a"+n];
        
        x2 = getA(y,x,z,p[1],p[0],p[2]);
        y2 = getA(x,y,z,p[0],p[1],p[2]);
        //x2 = aDist(x2,xa);
        //y2 = aDist(y2,ya);
        
        o._x = x2;
        o._y = y2;
    }
} 

My problem is that whenever the z position gets within the box's depths, even when the camera is outside the box, the box seems to invert itself.


To explain my methodology a bit, I'm rendering any given object (or, as of now, point) by finding it's x&y angles relative to the position of the camera and then just using that angle as a strait up x/y position. There is no view limit right now, affording the player a 360 degree view around themselves.

In theory, this would mean that an x/y/z position of 50/50/-50 would render this box the same as -50/50/50. Yet while 50/50/-50 seems to render the box just fine, -50/50/50 renders it in a triangular shape.

I really can't wrap my head around why this would be happening, any ideas?

[Pazil]

First off, I don't see you rotating the points in relation to the rotation of the camera...then again, have you even implemented camera rotation?

I'm not too sure about you're problem, but I think I can some what explain it (I had had this problem (if i understand yours correctly) when I made my engine):

--see picture--

After you read the picture:

The way to go around this is z-clipping, which will chop the intersecting line, and put a vertice closely in front of the viewing plane (never do: z = 0, because then you start dividing with 0, which will make it go whack).

I hope I understood your problem...?

P.

[Captain_404]

Ugh, I always do this. Solved my own problem fairly shortly after posting. But thanks for your reply Pazil!

Apparently my problem was in try to calculate the x and y positions using the same functions. I'm guessing I only have to deal with the z-axis once, and my old code dealt with it twice, causing the errors.

So my new code has separate function for finding the x and y positions. Now, I have have no idea how flawed this attempt may or may not be, but here's the code form my latest version for those interested:

var magic = 180/Math.PI;
function getA(x1,y1,z1,x2,y2,z2) {
    var d = Math.sqrt((x2-x1)*(x2-x1)+(z2-z1)*(z2-z1));
    var yd = y2-y1;
    var r = Math.atan2(yd,d)*magic;
    return r;
}

function getAX(x1,z1,x2,z2) {
    var zd = z2-z1;
    var xd = x2-x1;
    var r = Math.atan2(xd,zd)*magic;
    return r;
}

p0 = [-50,-50,-50];
p1 = [-50,50,-50];
p2 = [-50,-50,50];
p3 = [-50,50,50];
p4 = [50,-50,-50];
p5 = [50,50,-50];
p6 = [50,-50,50];
p7 = [50,50,50];
p8 = [0,0,0];

var x = 50;
var y = 0;
var z = -50;

var xa = 0;
var ya = 0;

for (var n=0; _root["p"+n]; n++) {
    _root["p"+n][3] = "0x"+random(10)+random(10)+random(10)+random(10)+random(10)+random(10);
}

onEnterFrame = function() {
    removeMovieClip(s);
    createEmptyMovieClip("s",1);
    
    z = _ymouse-180;
    x = _xmouse-180;
    
    if (Key.isDown(Key.UP)) y++;
    if (Key.isDown(Key.DOWN)) y--;
    if (Key.isDown(Key.LEFT)) x++;
    if (Key.isDown(Key.RIGHT)) x--;
    
    if (xa >= 360) xa = 0;
    else if (xa < 0) xa = 359;
    for (var n=0; _root["p"+n]; n++) {
        p = _root["p"+n];
        s.attachMovie("a","a"+n,n);
        o = s["a"+n];
        
        var c = new Color(o);
        c.setRGB(p[3]);
        
        x2 = getAX(x,z,p[0],p[2])+180;
        y2 = getA(x,y,z,p[0],p[1],p[2])+180;
        
        o._x = x2;
        o._y = y2;
    }
} 

[Master_X]

just a question inbetween:

is your code above using: Quaternion?
http://en.wikipedia.org/wiki/Quaternion

[Captain_404]

Not as far as I know, or at least, I was unaware of using them if I did?

This is the first time I've even heard of Quaternion.