Javascript  »  Animationen  »  3D-Engine

zur Übersicht

Kategorie	Animationen
Bezeichnung	3D-Engine
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	62394 Aufrufe davon 2x gestern
Keine Beschreibung vorhanden.
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <style> body {cursor:"crosshair"; color:#00FF00; background-color:#000000;} </style> <script> var npunkt = new Array(); function dreh_x(punkt,winkel) { if(winkel!=0) { var z = punkt["z"]; var y = punkt["y"]; var Z= Math.cos(Math.atan2(y,z)+winkel)*Math.sqrt(y*y+z*z); var Y= Math.sin(Math.atan2(y,z)+winkel)*Math.sqrt(y*y+z*z); npunkt["x"] = punkt["x"]; npunkt["y"] = Y; npunkt["z"] = Z; return(npunkt); }else { return(punkt) } } function dreh_y(punkt,winkel) { if(winkel!=0) { var z = punkt["z"]; var x = punkt["x"]; var Z= Math.cos(Math.atan2(x,z)+winkel)*Math.sqrt(x*x+z*z); var X= Math.sin(Math.atan2(x,z)+winkel)*Math.sqrt(x*x+z*z); npunkt["x"] = X; npunkt["y"] = punkt["y"]; npunkt["z"] = Z; return(npunkt); }else { return(punkt) } } function dreh_z(punkt,winkel) { if(winkel!=0) { var x = punkt["x"]; var y = punkt["y"]; var X= Math.cos(Math.atan2(y,x)+winkel)*Math.sqrt(x*x+y*y); var Y= Math.sin(Math.atan2(y,x)+winkel)*Math.sqrt(x*x+y*y); npunkt["x"] = X npunkt["y"] = Y npunkt["z"] = punkt["z"]; return(npunkt); }else { return(punkt) } } 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]); document.all["zahl"].innerHTML = alle_punkte.length; } function wuerfel() { neuer_punkt(0,0,0); neuer_punkt(50,50,50); neuer_punkt(0,50,50); neuer_punkt(50,0,50); neuer_punkt(-50,-50,50); neuer_punkt(-50,0,50); neuer_punkt(0,-50,50); neuer_punkt(-50,50,50); neuer_punkt(50,-50,50); neuer_punkt(50,50,0); neuer_punkt(-50,-50,0); neuer_punkt(-50,50,0); neuer_punkt(50,-50,0); neuer_punkt(50,50,-50); neuer_punkt(0,50,-50); neuer_punkt(50,0,-50); neuer_punkt(-50,-50,-50); neuer_punkt(-50,0,-50); neuer_punkt(0,-50,-50); neuer_punkt(-50,50,-50); neuer_punkt(50,-50,-50); } function kreuz() { neuer_punkt(0,0,0); neuer_punkt(0,0,10); neuer_punkt(0,0,20); neuer_punkt(0,0,30); neuer_punkt(0,0,40); neuer_punkt(0,0,-10); neuer_punkt(0,0,-20); neuer_punkt(0,0,-30); neuer_punkt(0,0,-40); neuer_punkt(0,0,-50); neuer_punkt(0,0,50); neuer_punkt(0,-50,0); neuer_punkt(0,50,0); neuer_punkt(-50,0,0); neuer_punkt(50,0,0); neuer_punkt(0,10,0); neuer_punkt(0,20,0); neuer_punkt(0,30,0); neuer_punkt(0,40,0); neuer_punkt(0,-10,0); neuer_punkt(0,-20,0); neuer_punkt(0,-30,0); neuer_punkt(0,-40,0); neuer_punkt(10,0,0); neuer_punkt(20,0,0); neuer_punkt(30,0,0); neuer_punkt(40,0,0); neuer_punkt(-10,0,0); neuer_punkt(-20,0,0); neuer_punkt(-30,0,0); neuer_punkt(-40,0,0); } function kugel(n,radius) { var N=n; var M=0; neuer_punkt(0,0,0); while(N>=0) { neuer_punkt(Math.sin(M)*radius*Math.sin(Math.PI*N/n),Math.cos(M)*radius*Math.sin(Math.PI*N/n),Math.cos(Math.PI*N/n)*radius); N--; M+=0.5; } } var h=0.5; var v=0.5; 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 nummer = alle_punkte.length - 1; while(nummer>=0) { darstellen(alle_punkte[nummer]); nummer--; } } 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; function beweg_dich() { alle_drehen(bx,by,bz); timer1 = setTimeout("beweg_dich()",10); var Timer="true" } function erfasse() { var mausx = window.event.offsetX; var mausy = window.event.offsetY; by = Math.round(0.15*Math.sin(Math.atan2(mausx-rx,ry))*100)/100; bx = Math.round(0.15*Math.cos(Math.atan2(rx,mausy-ry))*100)/100; } function zuruecksetzen() { if(Timer) { clearTimeout(timer1); Timer=false; } alle_punkte = new Array(); document.all["inhalt"].innerHTML=""; document.all["zahl"].innerHTML = "0"; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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@Antifas.de !!! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ //Hier der Punkt(0,0,0) des Koordinatensytems relativ zur Seite! var rx = 300; var ry = 200; var bz = 0.05; //Rotation um die Z-Achse (max. 0.15) var symbol="<b>*</b>"; </script> </head> <body onmousemove="erfasse();" onload="beweg_dich();"> Das Beste ist:<br> Man kann ganz leicht eigene neue Objekte erstellen! <form> <input type=button value="kreuz();" onclick="kreuz();"><br> <input type=button value="wuerfel();" onclick="wuerfel();"><br> <input type=button value="kugel(n,radius);" onclick="kugel(50,70);"><br> <input type=button value="zurücksetzen();" onclick="zuruecksetzen();"></form> Es sind <span id="zahl">0</span> Punkte dargestellt. <div id="inhalt"></div>

Kommentare zu 3D-Engine

2 Kommentar(e) vorhanden / Anzeige der neuesten 5

am 13.11.2005 um 01:39 Uhr von fLiP
Hat mir weitergeholfen... MfG fLiP... 

am 13.11.2005 um 01:38 Uhr von fLiP
hat mir für ein allgemeines verständnis geholfen... MfG fLiP... 

am 07.04.2005 um 09:17 Uhr von Noah Loggers
Thanx!!! Noah Loggers http://www.lsol.nl/... 


Alle Kommentare anzeigen   -   Kommentar hinzufügen