I'm trying to understand if it's possible to create a game where the player can switch between 2d (strategic/bird view) and 3d (actual gameplay) using only the 3d supported JS/HTML5 game engine, like three.js or babylon.js?

I'm aware that there are few 2d/3d game engines like Godot, Turbulenz and Blend4Web, but still curious if i can do it same good only with a 3d game engine.

Thanks in advance.

  • \$\begingroup\$ What would make it impossible? What specific barrier have you encountered so far that you're not sure how to overcome? In general, StackExchange is better at helping you solve real demonstrated problems, than it is at speculating on whether something might possibly pose a problem in the future. \$\endgroup\$
    – DMGregory
    Mar 6, 2017 at 4:49

1 Answer 1


2d rendering is easily possible with 3d rendering engines, even when there is no explicit support for it.

How it would work: Just put your two-dimensional geometry parallel to the xy-plane (or any other plane) and set your camera's viewing direction orthogonal to this plane. I would suggest using a orthogonal projection matrix, which allows you to make use of different depth-levels easily (which may look odd if you're using a 3-dimensional perspective projection).

I you just want to show your normal scene from above you don't even need to set up manual 2d-geometry. Just Put your camera above your scene (usually in +y direction) and switch to orthogonal projection.

  • \$\begingroup\$ Thanks for the descriptive answer! As you perhaps understood i'm not a game designer so pardon me for dumb questions, but, when the player would switch to orthogonal projection from up above, is it possible to actually design this view rather than showing 3d models from above? We designing football match, so 3d would look like [this] (lh5.ggpht.com/_sLN-4LHcbvM/SQqkqSaBhdI/AAAAAAAACG0/hUKLty5BgD8/…), and 2d would be something like [this] (grumpyscottishman.files.wordpress.com/2016/10/2d-graphics.jpg) \$\endgroup\$
    – Kata
    Mar 6, 2017 at 13:07
  • \$\begingroup\$ @Ziya If you want to show other geometry (like the 2d-icons for players) the first approach would be the one to choose. Place your 2d-graphics on a plane and put your camera somewhere orthogonal to it. You could also try to just replace your 3d models with the 2d-icons and put your camera above, but creating a separate scene/view is probably more painless. \$\endgroup\$
    – LukeG
    Mar 6, 2017 at 13:12
  • \$\begingroup\$ can you share here how to do this with code sample?(preferably with babylon.js) \$\endgroup\$ Jun 6, 2018 at 19:42

You must log in to answer this question.

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