This post will show a step by step overview of how to implement an infinite world in three.js using a method outlined in a previous post. This is just a high level summary using YouTube videos, I'll go into the code in another post. 

1.  Start off with three tiles

First, create three tiles with the camera positioned in the middle:

2. Move forwards

When the camera moves forwards, move the tile from the back to the very front, keeping the camera on the centre tile.

3. Build up a grid

Just by changing the X position of the tiles, they will apear to the side of the camera:

3 rows of tiles can be built up creating a grid using the same initial code as for the first row.

We just need to altering the X position - one positive, the other negative.

4. Moving backwards

The same way we move forward can be applied in reverse to allow us to move backwards:

At this point we've got a 3 x 3 grid, and are able to move forward and backwards, but not left and right (without reaching the edge).

5. Trap the user in the world forever

Very similar code monitoring the z axis can be used to detect when the camera moves left or right (along the x axis), allowing us to add terrain appropriately along the x axis:

Now the user is trapped, as whatever direction they move, more terrain is 'created'.

6. What's it like underneath?

Because everybody wants to put a turtle on its back, here's a look at things from underneath:

How to code this?

I've written a 2 part tutorial on how to create this effect here