Creating a looping map plane

Questions
1

Greets,

So, I have a few “maybe” ideas for this, but I wanted to check to see if there was a lightweight, prebuilt tool in ThreeJS to do this, and all the search terms I try keep bringing up things like instructions on how to enable/disable rear face projection.

I’m building a clone of FF3j as a learning project, and am trying to sort out how to make the map wrap around from left to right (or top to bottom) as you approach the edge of the overworld, instead of having an “edge of the world” scenario.

image
image1280×720 383 KB

As you can see from my screenshot, the edge is rather abrupt. Right now my map is composed of a group of planes (Scene → Group → 128*128 planes) and I am trying to sort out the best way to make the map wrap. (Fans of the game may note that this map isn’t one that loops, but it’s the only map I have in my prototype to screenshot with at the moment since I’m working on map editing and graphics still.)

My “maybeboard” consists of the following:

  • Create a boundary of duplicate tiles around the edge and teleport to the opposite edge once you step on them to “fake” it.
  • Pull some shenanigans involving 2 to 4 cameras and render from each camera to fill in transparent voids
  • Split the map group into four groups and physically move them based on which edge of the current group you’re closer to, teleporting the player as you leave the bounds like in the first example.

I know the first or third options should work, but I figured I should see if ThreeJS has a tool in it that would make this more simple than some of the brute force approaches above.

Thanks,
Ned

2

The teleport solution is the most straightforward if you want to keep the tiled solution.

But if you want an even more simpler solution.
-your map is a single texture applied to a single plane
-The ship don’t move, the camera don’t move, the plane don’t move.
-you move the UV of the texture with:

 // loops seamlessly
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

// then animate
texture.offset.x += 0.01;

Then keep track of the “actual” ship position using your offset value (if you want your ship to interact, like landing on ground and know it’s location). But this is another question.

3

Interesting! Hadn’t considered taking the “we move the world around the camera” approach from tutorials that literally.

I have some of the tiles like the ocean animated with shaders, and I’d need to work out the math to synchronize the offsets of billboarded structures, so I’m not sure if I can bake the map down to an image to use the stationary player entity trick, but that is a really simple trick to keep in the toolbox for later. :thinking:

Maybe that’s just a newbie overthinking the problem and not understanding how far the texturing tools go- I still think mostly in 2D, being a 2D artist by training and only learning to code by necessity.

It does seem like one of the teleporting solutions is my best bet, thanks!

4

For the water animation you can use “texture partial update”.
This require to have an array of the water tiles and swaping them on a timer. The whole map will still be able to scroll.

I don’t know how far you want to go, for just a training demo maybe this is overkill. But at least you know you can go further if needed :grinning_face: (including whole shaders solutions)

https://threejs.org/examples/#webgl_materials_texture_partialupdate