Taking an existing HTML5/JS project into three.js?

This is an experiment to see whether my HTML5/JavaScript project, The Forest, could work effectively using WebGL through the three.js library.

So far I have only created a small 300m x 300m area with fog limiting visibility. A map centred on this area can be seen here (in my existing project).

The terrain is generated by the same limitless terrain generator as in my existing project.

Demo: https://myforest.uk/Forest3JS.html

I have reached this point (version 20.2.10) in a couple of weeks by reading first Jos Dirksen’s book “Learn Three.js” and then the threejs fundamentals pages. The latter were particularly important for discovering how to make the geometry of the ground using my existing terrain generator. Without that I was close to giving up the idea as being too difficult.

The next challenge is to change the area of the mesh as the user moves forward. Things coming into view in the distance must be added to the scene and those left way behind must be removed. (Temporarily the user is prevented from going beyond the edge of the 300m square area but there should be no edge.)

There is a strange problem with the movement controls at the start. I am moving the camera, as representing the player exploring the forest. It is necessary to move several steps forward before my buttons (mouse/touch/key) behave as they should. I have written a 20-step forward move before the first rendering of the scene in order to correct this but I am at a loss to see why that should be necessary.

To the camera you can look at Collection of examples from discourse.threejs.org e.g.

Links in source Code

hofk: Thanks for trying to help. The problem was all of my own making and is now corrected in my latest version of the demo. Moving the camera as if it is the eye of the explorer is really not difficult at all.