How to create a 3D Tile map in Threejs?

Questions
1

Hi, can someone help me to learn threejs?

I want to create a simple tilemap like this

image
image1280Ă—720 51.4 KB

Can someone share basic tutorial to follow and get this done?

2

There’s approximately exactly infinite ways of achieving that.

  1. You can code the map, then generate tiles (or load tile model for each specific tile type) based on that map (example.) Personally, unless it’s a minecraft-like project, I’d say it’s not a very flexible solution - works only for super-simple or generative world.
  2. You can create a map in Spline or Unity (+Needle), and just export it as a three scene. You can also give Beard Engine a try. This way you’ll get the most “game engine” experience you can get with three.
  3. So far my favorite would be to simulate old-school engines like RPG Maker in Blender. Create a tileset with map elements:
    tileset
    tileset3248Ă—2112 780 KB

    Then build the map using said tileset:
    map
    map3248Ă—2112 1.46 MB

    Then export it to GLTF, load into three.js and - based on properties of each tile - add interactions / physics / optimisations etc. Advantage of this over engines is that you get a Blender built-in GLTF editor right away, so you can tweak animations, baked lights, texture painting etc - right in the editor.

But as earlier - there are nearly endless ways to generate maps, it’s up to your creativity and preferences.

2 Likes