In the past I've done a 2D tile map using HTML, CSS and Javascript. Now I have the task of creating a 3D version using the same technologies - think of it like a space map where all planets have x/y/z positions.

Currently, I have no idea to do this. Is there an existing library or something I can modify to do my job? If not, what method of rendering the map should I use?

It needs to be as browser independent as possible, so I can't use webgl, flash or canvas. I'm considering plain JS & HTML or SVG (using Raphael for compatibility).

  • 2
    \$\begingroup\$ Maybe have a look at ThreeJS? \$\endgroup\$
    – bummzack
    Aug 29, 2012 at 7:11

1 Answer 1


If you've got planets in space, in a realistic way, this probably means that:

  • Planets are extremely large
  • There is a lot of space in between them

This means that orthographic projections (like you might use for a 2d tile game) are very unhelpful. So you will have to use some kind of perspective view.

Which is fine, you just need to determine what transformations are necessary to have the camera facing the right direction and showing objects the appropriate size for their distance. Obviously, a realistic view of e.g. planet Mars from earth would typically be very small (e.g. a small dot), as it appears in the sky. But depending on the simulation, you might be standing on, say, Ganymeade looking at Jupiter, where it would take up half the sky (or something). There are plenty of applications which already do this kind of simulation.

I would really recommend the use of canvas. I suspect that SVG is usefully supported by fewer browsers than canvas (particularly on mobile platforms, where you can't use any kind of plugin to fix it).

It is possible to do many things using HTML and css e.g. image scaling, and perhaps rotation (depending on CSS version).

I really prefer canvas to CSS, because there are a lot fewer differences between browsers, and the feature set and behaviour is much better defined. Plus, you can't draw shapes very easily (or maybe, at all) using CSS. Drawing shapes using CSS is a big horrible hack if it's even possible.

  • \$\begingroup\$ That you for your recomendations. \$\endgroup\$
    – gotha
    May 1, 2012 at 7:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .