Full version: jsB@nk » 3D » 3D Solar System
URL: https://www.javascriptbank.com/examples-solarsystem3d.html
This JavaScript code makes a solar system on your web pages. It imitate solar system with Sun and planets which are moving in universe, user can change this speed of movement and direction by clicking and dragging mouse.
Full version: jsB@nk » 3D » 3D Solar System
URL: https://www.javascriptbank.com/examples-solarsystem3d.html
<SCRIPT language=javascript><!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/// ---------------------------------------------------------------------------// MATERIALSvar sunMaterial = new Material('<img src="images/sun.gif" width="20" height="20" alt="" border="0">');var mercuryMaterial = createClipButtonMaterial("images/mercury.gif", 20, 180, 20, 20, 9);var venusMaterial = createClipButtonMaterial("images/venus.gif", 20, 180, 20, 20, 9);var earthMaterial = createClipButtonMaterial("images/earth.gif", 20, 180, 20, 20, 9);var moonMaterial = createClipButtonMaterial("images/moon.gif", 20, 180, 20, 20, 9);var marsMaterial = createClipButtonMaterial("images/mars.gif", 20, 180, 20, 20, 9);// ---------------------------------------------------------------------------// MODELS// A Planet object to capsule planet propertiesfunction Planet(name, material, distance, rotation) {this.name = name;this.distance = distance;this.rotation = rotation;this.toString = PlanetToString;// creates new planet modelthis.model = new Model(name, material);this.model.setPoints( new Array( new Point3D(0, 0, 0, 0) ) );// moves the planet to its positionvar myMatrix = new Matrix();myMatrix.translate(this.distance, 0, 0);this.model.transform(myMatrix);// assign animate methodthis.animate = PlanetAnimate;// renders animation matrixthis.rotationMatrix = new Matrix();this.rotationMatrix.rotateY(this.rotation);}function PlanetAnimate() {this.model.transform(this.rotationMatrix);}function PlanetToString() {return this.name + " @ " + this.distance + " with " + this.rotation + ".";}// ---------------------------------------------------------------------------// the planetsvar planets = new Array(new Planet("mercury", mercuryMaterial, 0.387, 0.235), // 47.8725 km/snew Planet("venus", venusMaterial, 0.72, 0.175), // 35.0214 km/snew Planet("earth", earthMaterial, 1, 0.145), // 29.7859 km/snew Planet("mars", marsMaterial, 1.5, 0.12) // 24.1309 km/s//new Planet("saturn", saturnMaterial, -0.8, 0.05));// the special objects// sunvar sunModel = new Model("sun", sunMaterial);sunModel.setPoints( new Array(new Point3D(0, 0, 0, 0)) );// moon of the earthvar moonModel = new Model("moon", moonMaterial);moonModel.setPoints( new Array(new Point3D(0, 0, 0, 0)) ); // 1.023 km/svar moonInitMatrix = new Matrix();moonInitMatrix.translate(0.1, 0, 0);//moonModel.setPivot(0.1, 0, 0);moonModel.transform(moonInitMatrix);// ---------------------------------------------------------------------------// MODULATORS// modulator to rotate the model dependent on mouse interactionsvar myMouseModulator = new MouseModulator("myMouseModulator", MouseModulator.MODE_ROTATE);// ---------------------------------------------------------------------------function initOnLoad() {fixNetscape();// creates and inits matrix to initialize the solar systemvar initMatrix = new Matrix();initMatrix.scale(180, 180, 180);initMatrix.rotateX( degToRad(-90) );sunModel.assignLayers(); // NS bug fixsunModel.transform(initMatrix);sunModel.draw();// links all planets to the sunfor (i = 0; i < planets.length; i++) {planets[i].model.assignLayers(); // NS bug fixplanets[i].model.linkTo(sunModel);planets[i].model.draw();}// links moon to the earthmoonModel.assignLayers(); // NS bug fixmoonModel.linkTo(planets[2].model);moonModel.draw();// starts animationanimate();}/* * The main animate method. Calls itself repeatedly. */function animate() {var delay = 1;// animates modulators ------------------------------------------myMouseModulator.animate();mouseModMatrix = myMouseModulator.getMatrix();// animates models ----------------------------------------------// transforms the solar system depending on mouse movements.sunModel.transform(mouseModMatrix);// updates displaysunModel.draw();// rotates every planetfor (planetIndex = 0; planetIndex < planets.length; planetIndex++) {var p = planets[planetIndex];if (p.animate) p.animate();p.model.draw();}// rotates the moonvar staticRotateMatrix = new Matrix();staticRotateMatrix = new Matrix();staticRotateMatrix.rotateY(0.4);staticRotateMatrix.rotateZ(0.4);moonModel.transform(staticRotateMatrix);moonModel.draw();// loop ---------------------------------------------------------// calls itself with an delay to decouple client computer speed from the animation speed.// result: the animation is as fast as possible.setTimeout("animate()", delay);}// event handlingdocument.onmousemove = mouseMoveHandler;document.onmousedown = mouseDownHandler;document.onmouseup = mouseUpHandler;if (ns) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);/* * The mouse handlers in this document must call the modulator's handlers. * To be able to use a mouse modulator and to do your own stuff. */function mouseMoveHandler(e) {// calls move handler of the mouse modulatormyMouseModulator.move(e);return !ie;} function mouseDownHandler(e) {// calls down handler of the mouse modulatormyMouseModulator.down(e);}function mouseUpHandler(e) {// calls up handler of the mouse modulatormyMouseModulator.up(e);}// --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY bgColor=black bottomMargin=0 leftMargin=0 onload=initOnLoad() text=white><!-- layer to bugfix netscape --><DIV id=fixnetscape style="POSITION: absolute; VISIBILITY: hidden"></DIV><SCRIPT language=JavaScript type=text/javascript><!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]// MANDATORY: INSERTION OF HTML PART INTO PAGE// creates the HTML code representing the model's points// NB: This is written directly into the page from within the methodsunModel.createPointCode();moonModel.createPointCode();for (i = 0; i < planets.length; i++) {planets[i].model.createPointCode()}// --></SCRIPT></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/3d/js/LyrObj.jshttp://javascriptbank.com/javascript/3d/js/3dhtml.jshttp://javascriptbank.com/javascript/3d/js/ClipButton.jshttp://javascriptbank.com/javascript/3d/js/materials.jshttp://javascriptbank.com/javascript/3d/js/ClipButton.jshttp://javascriptbank.com/javascript/3d/js/ClipButton.jshttp://javascriptbank.com/javascript/3d/examples/images/sun.gifhttp://javascriptbank.com/javascript/3d/examples/images/mercury.gifhttp://javascriptbank.com/javascript/3d/examples/images/venus.gifhttp://javascriptbank.com/javascript/3d/examples/images/earth.gifhttp://javascriptbank.com/javascript/3d/examples/images/moon.gifhttp://javascriptbank.com/javascript/3d/examples/images/mars.gif