drehender würfel - eckpunkte markieren

[oops]

hallo in die runde,

letztens hatte ich schon viel hilfe bei der umwandlung eines drehenden würfels erhalten. es funktioniert bisher auch bestens.

nun habe ich aber noch ein (hoffentlich) abschließendes problem zu lösen:

während sich der würfel dreht, sollen ecken eine andere farbe oder einen punkt erhalten, um die drehung nachvollziehen zu können. es muss dabei natürlich immer die gleiche ecke sein, sich also mitdrehen. leider sind meine AS-kenntnisse in der hinsicht etwas bescheiden, so dass ich auf tips angewiesen bin. hier dazu nochmal der (wie ich glaube) entscheidende code:

//DATA
//
// you can change the data to create different objects
//
// cube vertex data
points = new Array(new Array(-45, 60, 100),
new Array(-125, 0, 0),
 
new Array(-45, 60, -100),
 
new Array(35, 120, 0),
 
new Array(45, -60, 100),
 
new Array(-35, -120, 0),
 
new Array(45, -60, -100),
 
new Array(125, 0, 0));
// cube face data... first four values are indices into the vertex data,
// 5th is the colour for the face, 6th is presently unused (will later hold
// depth info to allow simple hidden line.)
faces = new Array(new Array(0,1,2,3,0xFFFFFF,0),
 
new Array(4,5,6,7,0xFFFFFF,0),
 
new Array(0,1,5,4,0xFFFFFF,0),
 
new Array(1,2,6,5,0xFFFFFF,0),
 
new Array(2,3,7,6,0xFFFFFF,0),
 
new Array(3,0,4,7,0xFFFFFF,0));
//FUNCTIONS
//
//draws a connected line from a list of points
function draw_points(theArray) {
    persp.clear();
    persp.lineStyle(5);
    persp.moveTo(theArray[0][0], theArray[0][1]);
    for (i=1; i<theArray.length; i++) {
        persp.lineTo(theArray[i][0], theArray[i][1]);
    }
}
//draws solid faces based on vertex & face arrays
function draw_solid(thePoints,theFaces, opacity){
    persp.clear();
    persp.lineStyle(6, 0x000000, 100);
    for (i=0;i<theFaces.length;i++){
        persp.beginFill(theFaces[i][4],opacity);
        persp.moveTo(thePoints[ (theFaces[i][0]) ][0],thePoints[ (theFaces[i][0]) ][1]);
        persp.lineTo(thePoints[ (theFaces[i][1]) ][0],thePoints[ (theFaces[i][1]) ][1]);
        persp.lineTo(thePoints[ (theFaces[i][2]) ][0],thePoints[ (theFaces[i][2]) ][1]);
        persp.lineTo(thePoints[ (theFaces[i][3]) ][0],thePoints[ (theFaces[i][3]) ][1]);
        persp.endFill();
    }
}
// rotation around x axis
function xrot_points(theArray, angle) {
    rangle = angle*Math.PI/180;
    for (i=0; i<theArray.length; i++) {
        y = theArray[i][1];
        z = theArray[i][2];
        theArray[i][1] = y*Math.cos(rangle)-z*Math.sin(rangle);
        theArray[i][2] = z*Math.cos(rangle)+y*Math.sin(rangle);
    }
}
// perspective projection   
function project_points(theArray, pp) {
    
    for (i=0; i<theArray.length; i++) {
    r=pp/(pp-theArray[i][2]);
    theArray[i][0]*=r;
    theArray[i][1]*=r;
    }
}
// Initialise sliders
_root.thefaderx.knob._y=_root.depth.knob._y=50; 

außerdem hänge ich noch die ganze datei an, damit man sehen kann, wie es funktioniert.

das original ist unter http://www.cleverpig.com/flashstuff.htm
zu sehen.

vielen dank!

[kenichi]

hi,
obwohl ich im moment auch an einer 3d engine bastle, weiss ich nicht ganz was du meinst. du hast doch die koordinaten der eckpunkte des wuerfels in deinem array stehen...

wenn du die punkte umrechnest, um sie auf dem bildschirm darzustellen, dann hast du sogar noch die 2d punkte dazu...

ansich hast du also alles was du wissen musst. oder hab ich jetzt was falsch verstanden?

[oops]

hallo Kenichi,

sicher hast du recht, nur weiß ich nicht, wo ich in dem skript eingreifen soll.

die punkte werden ja gleich am anfang (points) festgelegt. nur wo kann ich diese dann nochmal abreifen, um ihnen einen anderen farbwert zuzuweisen. auch sind die anfangskoordinaten statisch und die bewegung kommt erst später hinzu. nun sollen sich die punkte ja auch gemäß der rotation mitdrehen.

wäre es jetzt einfach möglich, den punkten eine farbe zuzuweisen?

[kenichi]

hi,

sagen wirs mal so, die punkte bleiben ja in dem array stehen, und sie stehen auch immernoch an der gleichen position im array. das einzige was sich an den punkten geaendert hat, ist die koordinate...
aber ich frage mich sowieso wie du den punkten eine farbe zuweisen willst.

willst du an die stelle der punkte dann einen kleinen kreis hinsetzen, oder wie hast du das vor?

gruss,
kenichi

[oops]

hi,

ja, z.b. einen punkt drauf setzen, oder einen kreis drum machen. alternativ wäre auch das einfärben einer seite möglich.

es geht halt darum, dass man beim drehen etwas durcheinanderkommt, was denn nun vorn und was hinten ist. deshalb soll der betrachter eine orientierungshilfe bekommen. wie gesagt, eine seite (nicht fläche) könnte man auch farbig verändern. im skript wird es aber für alle seiten zusammen festgelegt.

[oops]

bin gleich noch an einer weiteren stelle hängen geblieben:

im skript ist die linienfarbe definiert mit

function draw_solid(thePoints,theFaces, opacity){
    persp.clear();
    persp.lineStyle(3, 0x66FFCC, 100); 

ist es nun möglich, von außen per button die farbe zu ändern? also z.b. so:

on (release) {
_root.wuerfel.persp.lineStyle(3, 0x000000, 100);
} 

danke!

[oops]

ok,

hab mich im forum mal ein bischen weiter umgesehen. da schrieb jemand, dass linien, wie von mir gezeichnet, in echtzeit entstehen.

wenn ich das richtig verstehe, kann man da gar nicht so einfach mit einem button drauf zu greifen.

in meinem skript (s.o.) wird ja auch der slider initialisiert, wenn ich das richtig verstehe (man merkt jetzt, dass das skript nicht von mir stammt ;-))

müßte ich denn soetwas auch machen, um die farbe des würfels, also über lineStyle ändern zu können?

hat evtl. jemand eine lösung für meine 2 bescheidenen problemchen?
(1. farbige eckpunkte des würfels gestalten
2. würfel komplett per button anders färben)

danke

[oops]

in der hoffnung, dass mir am anfang der woche jemand weiterhelfen kann, möchte ich noch einmal meine 2 kleinen probleme auf den tisch bringen:

1. wie kann ich einen oder mehrere eckpunkte per button farbig markieren? alternativ wäre auch eine farbänderung einer seite zur kenntlichmachung der rotation möglich.

2. wie kann ich den würfel komplett per button anders einfärben?

vielleicht würde es mir auch weiterhelfen, wenn mir jemand die funktionen des skriptes etwas näher erläutern könnte, so dass ich evtl. selbst in der lage bin, mit meinen bescheidenen kenntnissen die änderungen vorzunehmen. dazu hier nochmal der code der frames 1+2. die kommentare in deutsch sind von mir, aber richtig schlüssig ist das alles für mich noch nicht.
frame1:

//DATA
// --> Wuerfel-Eckpunkte beim Start (Koordinaten x,y,z)
points = new Array(new Array(-45, 60, 100),
new Array(-125, 0, 0),
new Array(-45, 60, -100),
new Array(35, 120, 0),
new Array(45, -60, 100),
new Array(-35, -120, 0),
new Array(45, -60, -100),
new Array(125, 0, 0));
// --> Wuerfel-Linien - ein Array = eine Seite von 0-7 Eckpunkten
faces = new Array(new Array(0,1,2,3),
new Array(4,5,6,7),
new Array(0,1,5,4),
new Array(1,2,6,5),
new Array(2,3,7,6),
new Array(3,0,4,7));
//FUNCTIONS
// --> Zeichnet Linie zwischen den Punkten
function draw_points(theArray) {
    persp.clear();
    persp.lineStyle(5); // --> Angabe in lineStyle hat keine Auswirkung
    persp.moveTo(theArray[0][0], theArray[0][1]);
    for (i=1; i<theArray.length; i++) {
        persp.lineTo(theArray[i][0], theArray[i][1]);
    }
}
//draws solid faces based on vertex & face arrays
function draw_solid(thePoints,theFaces, opacity){
    persp.clear();
    persp.lineStyle(6, 0x66FFCC, 100);
    for (i=0;i<theFaces.length;i++){
        persp.moveTo(thePoints[ (theFaces[i][0]) ][0],thePoints[ (theFaces[i][0]) ][1]);
        persp.lineTo(thePoints[ (theFaces[i][1]) ][0],thePoints[ (theFaces[i][1]) ][1]);
        persp.lineTo(thePoints[ (theFaces[i][2]) ][0],thePoints[ (theFaces[i][2]) ][1]);
        persp.lineTo(thePoints[ (theFaces[i][3]) ][0],thePoints[ (theFaces[i][3]) ][1]);
    }
}
// --> Rotation um die X-Achse
function xrot_points(theArray, angle) {
    rangle = angle*Math.PI/180;
    for (i=0; i<theArray.length; i++) {
        y = theArray[i][1];
        z = theArray[i][2];
        theArray[i][1] = y*Math.cos(rangle)-z*Math.sin(rangle);
        theArray[i][2] = z*Math.cos(rangle)+y*Math.sin(rangle);
    }
}
// --> Perspektivische Verzerrung
function project_points(theArray, pp) { 
    for (i=0; i<theArray.length; i++) {
    r=pp/(pp-theArray[i][2]);
    theArray[i][0]*=r;
    theArray[i][1]*=r;
    }
}
// Initialise sliders
_root.thefaderx.knob._y=50; 

frame2

//rotate & draw cube
// --> rotationsgeschwindigkeit
xrs += (_root.thefaderx.knob._y -50)/10;
 
//new copy of data (NB simply doing rot_points = points doesn't work!)
rot_points = new Array(points.length)
for (i = 0; i< rot_points.length;i++){
    rot_points[i]=new Array(3);
    for (j=0;j<3;j++){
        rot_points[i][j]=points[i][j];
    }
}
// --> Rotation um X-Achse
xrot_points(rot_points,xrs);
//project onto picture plane (pp dist calculated from depth slider)
project_points(rot_points, _root.depth.knob._y*6+500);
//draw cube (30% opaque)
draw_solid(rot_points,faces,0); 

vielen dank!