3D-Euro

(178 Bewertungen, ∅ 2,36 von 5)
Du musst eingeloggt sein um bewerten zu können.

Ein netter Effekt…

hier gehts zur Demo (mit Mausverfolger)
Der unten stehende Code ist eine komplette HTML-Seite mit Header. Es ist also nicht ratsam, diesen Code unverändert in eine bestehende Seite einzupassen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head><style>body {cursor:"crosshair"; color:#00FF00; background-color:#000000;}</style> <script>var sintab = new Array() function gmx() { neuer_punkt(-55,55,555); neuer_punkt(55,-55,555); neuer_punkt(55,-55,555); neuer_punkt(55,-555,55); neuer_punkt(555,55,55); neuer_punkt(55,555,-555); neuer_punkt(-55,-555,55); neuer_punkt(-555,55,555); neuer_punkt(55,-55,555); neuer_punkt(555,-555,55); neuer_punkt(55,555,55); neuer_punkt(-555,-55,55); neuer_punkt(555,55,55); neuer_punkt(55,555,5); neuer_punkt(-55,55,555); neuer_punkt(-555,55,555); neuer_punkt(55,555,-55); neuer_punkt(55,55,-555); neuer_punkt(555,-55,55); neuer_punkt(555,55,55); neuer_punkt(55,55,555); neuer_punkt(555,-55,55); neuer_punkt(55,-555,55); neuer_punkt(55,555,555); neuer_punkt(55,55,-555); neuer_punkt(-555,55,55); neuer_punkt(55,55,555); neuer_punkt(55,555,555); neuer_punkt(55,555,55); neuer_punkt(55,-555,55); neuer_punkt(5,55,555); neuer_punkt(555,55,55); neuer_punkt(55,555,-55); neuer_punkt(555,55,555); neuer_punkt(-555,55,55); neuer_punkt(555,55,555); neuer_punkt(55,555,-55); neuer_punkt(55,-555,55); neuer_punkt(55,555,55); neuer_punkt(555,55,555); neuer_punkt(55,555,555); neuer_punkt(555,-555,555); } function testen() { // alert(sintab[0]); } function sinus(x) { return(Math.sin(x)); } function cosinus(x) { return(Math.cos(x)); } var npunkt = new Array(); function dreh_x(punkt,winkel) { var z = punkt["z"]; var y = punkt["y"]; var Z= cosinus(Math.atan2(y,z)+winkel)*Math.sqrt(y*y+z*z); var Y= sinus(Math.atan2(y,z)+winkel)*Math.sqrt(y*y+z*z); npunkt["x"] = punkt["x"]; npunkt["y"] = Y; npunkt["z"] = Z; return(npunkt); } function dreh_y(punkt,winkel) { var z = punkt["z"]; var x = punkt["x"]; var Z= cosinus(Math.atan2(x,z)+winkel)*Math.sqrt(x*x+z*z); var X= sinus(Math.atan2(x,z)+winkel)*Math.sqrt(x*x+z*z); npunkt["x"] = X; npunkt["y"] = punkt["y"]; npunkt["z"] = Z; return(npunkt); } function dreh_z(punkt,winkel) { var x = punkt["x"]; var y = punkt["y"]; var X= cosinus(Math.atan2(y,x)+winkel)*Math.sqrt(x*x+y*y); var Y= sinus(Math.atan2(y,x)+winkel)*Math.sqrt(x*x+y*y); npunkt["x"] = X npunkt["y"] = Y npunkt["z"] = punkt["z"]; return(npunkt); } function drehen(punkt,x,y,z) { npunkt = dreh_x(punkt,x); npunkt = dreh_y(npunkt,y); npunkt = dreh_z(npunkt,z); npunkt["name"] = punkt["name"]; alle_punkte[punkt["stelle"]]["x"] = npunkt["x"]; alle_punkte[punkt["stelle"]]["y"] = npunkt["y"]; alle_punkte[punkt["stelle"]]["z"] = npunkt["z"]; alle_punkte[punkt["stelle"]]["name"] = npunkt["name"]; } var alle_punkte = new Array(); function neuer_punkt(x,y,z) { var neu = alle_punkte.length; alle_punkte[neu] = new Array(); alle_punkte[neu]["x"]=x; alle_punkte[neu]["y"]=y; alle_punkte[neu]["z"]=z; alle_punkte[neu]["stelle"]=neu; //stelle im array -> wichtig zu werte-zurückschreiben alle_punkte[neu]["name"]="p" + neu; document.all["inhalt"].innerHTML += "<span id='p"+neu+"' class='p"+neu+"'>"+symbol+"</span>"; document.all["p"+neu].style.position = "absolute"; darstellen(alle_punkte[neu]); } function euro() { for(var i=0; i<2*Math.PI; i+=0.3) { neuer_punkt(100*Math.cos(i),100*Math.sin(i),0); } for(var i=-0.2*Math.PI; i<1.3*Math.PI; i+=0.3) { neuer_punkt(50*Math.cos(i),50*Math.sin(i),0); } for(var i=-10; i<70; i+=10) { neuer_punkt(10,i,0); } for(var i=0; i<70; i+=10) { neuer_punkt(-10,i,0); } } var h=0; var v=0; function darstellen(punkt) //schräge parallelperspektive { document.all[punkt["name"]].style.pixelLeft = punkt["x"] - h*punkt["z"] + rx; document.all[punkt["name"]].style.pixelTop = punkt["y"] + v*punkt["z"] + ry; document.all[punkt["name"]].style.fontSize = Math.abs(20 + punkt["z"]/4); } function alle_neu_ausrichten() { var nummeri = alle_punkte.length - 1; while(nummeri>=0) { darstellen(alle_punkte[nummeri]); nummeri--; } } function alle_drehen(wx,wy,wz) { var nummer = alle_punkte.length - 1; while(nummer>=0) { drehen(alle_punkte[nummer],wx,wy,wz); nummer--; } alle_neu_ausrichten(); } var bx=0.05,by=-0.05,Timer; var J=0; mausx=0; mausy=0; function beweg_dich() { alle_drehen(bx,by,bz); timer1 = setTimeout("beweg_dich()",10); rx=rx1+Math.sin(J)*50; ry=ry1+Math.cos(J)*50; J+=0.04 by = Math.round(0.1*sinus(Math.atan2(mausx-rx,ry))*100)/100; bx = Math.round(0.1*cosinus(Math.atan2(rx,mausy-ry))*100)/100; var Timer="true" } function erfasse() { mausx = window.event.offsetX; mausy = window.event.offsetY; } function zuruecksetzen() { if(Timer) { clearTimeout(timer1); Timer=false; } alle_punkte = new Array(); document.all["inhalt"].innerHTML=""; } /* ~~~~~~~~~~~~~~~ Dies ist ein Skript für eine Mini-3D-engine man kann 3dimensionale punkte P(x,y,z) um die Achsen des Koordinatensystem drehen! Erklärung zu den Funktionen: neuer_punkt(x,y,z): - erzeugt einen neuen Punkt mit den Koordinaten (x,y,z) - speichert die angaben als array im übergeordneten array 'alle_punkte' darstellen(punkt): - erwartet als übergabewert ein array mit den angaben zu den koordinaten und name - stellt den punkt auf dem Bildschirm in der schrägen Parallelperspektive dar alle_neu_ausrichten(): - sorgt mit einer Schleife dafür, dass alle punkte im Array 'alle_punkte' entsprechend ihrer koordinaten (funktion'darstellen()') dargestellt werden drehen(wx,wy,wz); - dreht einen punkt mit den entsprechenden übergabewert um die achsen - wx: winkel um die x-achse - wy: winkel um die y-achse - wz: winkel um die z-achse -> unterfunktionen: dreh_x(), dreh_y()& dreh_z() alle_drehen(): - sorgt mit einer Schleife dafür, dass alle Punkte im Array 'alle_punkte' mit der Funktion 'drehen()' gedreht werden - anschließend wird die funktion 'alle_neu_ausrichten aufgerufen erfasse(): - erfasst die Mauskoordinaten und rechnet sie in einen winkel (vom koordinatenursprung aus) um beweg_dich(): - diese Funktion sorgt für die bewegung, da sie in einem Zeitintervall die funktion 'alle_drehen()' aufruft - es werden die errechneten Winkel übergeben, wodurch man die Drehung mit der Maus steuern kann ################ Mit Hilfe der 'neuer_punkt()'-funktion kann man mit ein paar geometrie-kenntnissen leicht neue Objekte erschaffen ('kreuz()','kugel(n,radius)','wuerfel()') - mehr als 80 punkte gleichzeitig werden aber ganz schön rucklig... Viel Spaß damit! :-) Felix Info: Felix (at) Antifas.de !!! ~~~~~~~~~~~~~~~ */ //Hier der Punkt(0,0,0) des Koordinatensytems relativ zur Seite! var rx1 = 500; rx=500; var ry1 = 300; ry=300; var bz = 0.0; //Rotation um die Z-Achse (max. 0.15) var symbol="<b>?</b>";</script> </head> <body onmousemove="erfasse();" onload="beweg_dich();euro();"> <div id="inhalt"></div> </body> </html><center>powered by <a href="https://www.kostenlose-javascripts.de" title="kostenlose Javascripts" target="_blank" style="color: #FFFFEE;">Javascripts</a></center>

8 Kommentare

Schreibe einen Kommentar Antworten abbrechen