Recently I've started to experiment a bit with
BabylonJS. Its nice WebGL framework for web. As an exercise I made this small example - moving and rotating solar system.
You can check the working example here -
WebGL Solar System
Here is the full source code of the example:
solar.js
var canvas;
var engine;
var scene;
var sun;
var planet1;
var planet2;
var planet2Moon;
function start() {
canvas = document.getElementById("renderCanvas");
engine = new BABYLON.Engine(canvas, true);
scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
var c = 0;
var i = 0;
scene.beforeRender = function () {
planet1.position = new BABYLON.Vector3(20 * Math.sin(c), 0, 20 * Math.cos(c));
planet2.position = new BABYLON.Vector3(30 * Math.sin(i), 3 * Math.cos(i), 30 * Math.cos(i));
moon.position = new BABYLON.Vector3(5 * Math.sin(c), moon.parent.position.y, 5 * Math.cos(c));
c += 0.005;
i += 0.008;
};
window.addEventListener("resize", function () {
engine.resize();
});
}
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 0.1, 0.1);
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 50, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, false);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.5;
light.diffuse = new BABYLON.Color3(1, 1, 1);
var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene);
light0.diffuse = new BABYLON.Color3(1, 0.5, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);
sun = BABYLON.Mesh.CreateSphere("sun", 20.0, 20.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
var sunmaterial = new BABYLON.StandardMaterial('sunmaterial', scene);
sunmaterial.diffuseColor = new BABYLON.Color3(1.00, 1.00, 1.00);
sunmaterial.emissiveColor = new BABYLON.Color3(1.00, 0.72, 0.00);
sunmaterial.ambientColor = new BABYLON.Color3(0.94, 0.85, 0.36);
sunmaterial.specularColor = new BABYLON.Color3(1.00, 1.00, 1.00);
sun.material = sunmaterial;
planet1 = BABYLON.Mesh.CreateSphere("planet1", 10.0, 3.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
var planet1mat = new BABYLON.StandardMaterial('planet1mat', scene);
var planet1mat_diffuseTexture = new BABYLON.Texture('assets/planet1.png', scene);
planet1mat.diffuseTexture = planet1mat_diffuseTexture;
planet1mat.specularColor = new BABYLON.Color3(0, 0, 0);
planet1.material = planet1mat;
var frameRate = 10;
var yRotate = new BABYLON.Animation("yRotate", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var keyFramesR = [];
keyFramesR.push({
frame: 0,
value: 0
});
keyFramesR.push({
frame: frameRate,
value: Math.PI
});
keyFramesR.push({
frame: 2 * frameRate,
value: 2 * Math.PI
});
yRotate.setKeys(keyFramesR);
scene.beginDirectAnimation(planet1, [yRotate], 0, 2 * frameRate, true);
planet2 = BABYLON.Mesh.CreateSphere("planet2", 10.0, 5.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
moon = BABYLON.Mesh.CreateSphere("moon", 3.0, 1.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
moon.translate(planet2.position, 5, BABYLON.Space.WORLD);
moon.parent = planet2;
var planet2mat = new BABYLON.StandardMaterial('planet2mat', scene);
var planet2mat_diffuseTexture = new BABYLON.Texture('assets/planet2.jpg', scene);
planet2mat.diffuseTexture = planet2mat_diffuseTexture;
planet2mat.specularColor = new BABYLON.Color3(0, 0, 0);
planet2.material = planet2mat;
var yRotate = new BABYLON.Animation("yRotate", "rotation.y", frameRate/2, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
yRotate.setKeys(keyFramesR);
scene.beginDirectAnimation(planet2, [yRotate], 0, 2 * frameRate, true);
return scene;
};
