Make A Solar System with Three.js
For few days I start to play with Three.js, I make some research to understand how to create the objects in space, how to use diferent geometry objects and how to generate in general things in 3D space using Three.js. The Solar system demo came in mind after I have seen some demos from three.js demos page.
The demo idea is pretty simple, I had to create some planets with texture and some random star particles, all rotated slowly in space. I see that canvas render works better in Chrome but anyway, runs somehow in Firefox too, using a lot of CPU, more than 50% usually.
(Update1)
I made a little update, adding a rotation to all planets and I figured out how to build the saturn ring, of course, using a Cylinder Geometry Model intersected with the Sphere. I update also the random Stars code part and now the entire animation runs better in Canvas Render. I was trying to add a wall( cube room ) around with stars but does not look so nice and takes to many resources to render a 1700px width cube.
Here you can see the demo:
http://maran-emil.de/experiments/demo4/
Three.js source:
https://github.com/mrdoob/three.js
Textures source:
http://planetpixelemporium.com/pluto.html
Planets comparison source:
http://wordlesstech.com/2011/02/22/star-size-comparison/
Other interesting demos with same topic, Solar System using Canvas:
http://ie.microsoft.com/testdrive/Performance/Galactic/
http://www.joelblancoberg.com/solarsystem/
http://experiments.72lions.com/CanvasDisplayList/solar-system/index.html
http://neography.com/experiment/circles/solarsystem/