Creating tilemap using spritesheet on 3D plane?

So I’m wondering if there is an easy & efficient way of taking a tileset & drawing it onto a 3D plane by clicking & dragging to draw & holding a key such as control and clicking & dragging to delete tiles? Also, how to save?

Possibly related: A single mesh made of 12k points with 12k different materials. Is that possible?

There are many questions and examples here regarding mouse interaction. Key interaction is similar. Just keep track of the states of the relevant buttons/keys, and let the states guide the updates.

If you represent the “tiles” as individual objects, you can “delete” them by manipulating their visibility. If you apply the tiles as a single map to a single geometry, you can use an alphaMap with matching dimensions from a DataTexture, and update the DataTexture with your “drawing” and “erasing” actions.

Better yet how do I load a TMX JSON file from Tiled onto plane? Is possible?

I guess I misunderstood you, then. I thought you were talking about texture tiles.

Is it not possible to generate textures from TMX using Tiled?

@EliasHasle: yes but how do I load it onto a plane while keeping the frame rate at 60 with Three.js?

Is it a huge map, too large to be loaded and displayed all at once?

1 Like

yes. It is a 16384 x 16384. I just want it to load. As long as it stays above 30 FPS, I’m happy.

Is it a map? How much of it do you see at once?

Yes, it’s a map. You should be able to see like any other RPG. I’d say around 256, 256.

256x256 tiles? If you want to see the whole map at once, you can make a downscaled version that works as a single texture.

At this point, I just need example that can load & parse TMX files exported from Tiled.

If you can’t find it using Google, I guess you will have to get your hands dirty doing it yourself. TMX is based on XML. Check out XML parsers.


That does not help. Does anyone know where to find TMX reader for three.js??

You’re going to have to give people more information if you want someone to help you. You should assume that we don’t know what you’re talking about. What’s a TMX file? What’s “Tiled”, is it a program?

I’m pretty certain that a TMX reader for Three.js does not exist.


@marquizzo: My apologies. I didn’t realize there wasn’t enough info being said. So a TMX file is (Tile Map XML) map format. TMX is a flexible way to describe a tile based map. It can describe maps with any tile size, any amount of layers, any number of tile sets and it allows custom properties to be set on most elements. Beside tile layers, it can also contain groups of objects that can be placed freely. Tiled is located here :

Tiled is a free easy to use and flexible level editor that uses tilemaps.

Did I explain well enough? If not, please do let me know & I will do my best to go more in-depth.

In any case, what do you expect from community?
Guidance of how to work with XML-files? I perfectly agree with @EliasHasle’s suggestion, as there are tons of informations in the internet on how to work with it.

I just need a TMX loader example. Plain & simple. Pardon me, I do not wish to sound rude.

I don’t think there is such a thing for three.js (or even babylon). You will have to build one. I highly doubt someone is going to do that for you unless you pay them.


Is there not a single example on the internet that anyone can find? I know with all the censorship google does, it’s impossible to get the same search results in different places. That is why I ask.

1 Like

You don’t sound rude, you just sound entitled. You’ve had three people tell you that it doesn’t exist, yet you still insist that you want an example. I think it’s time you accept that you’re going to have to build your own. If you run into problems with your implementation, you can show your work here and we’ll try to help you.