Endless way II (single plane)

Resources
1

Hi community!

Here is another attempt of creation of endless lowpoly terrain, using one plane only.
Thanks to @makc3d, who encouraged me with this idea :beers:

Picture:

изображение
изображение1920×1080 290 KB

Demo: https://jtnbk.csb.app/
Source code: elastic-glitter-jtnbk - CodeSandbox

PS “RECLUSE” is a link to soundcloud.

18 Likes
2

Epic!

minor opinion-based suggestions:

  • sky, give it some complementary color maybe? Like very low-saturation orange
  • lines on the ground. I know you’re just using wireframe mode, but if the lines were same thickness as the lines on the path - it would blend in better
  • shadow. Maybe a shadow would help ground the character into the scene better. Perhaps an old-school circular contact shadow if a projected shadow break the style too much.
1 Like
3

Yay! Thanks! :beers:

Oh, whilst creation, I tried all the options you listed here :slight_smile:
And maybe because of my mood, phase of the Moon and the weather on Mars, I came up with the decision to keep amount of colors at minimum, pavement lines of the road has to be not the same as lines on the terrain, and I don’t want any shadows from the model (even that old school circular one). I liked that imperfect and minimalistic style of the scene :angel:

3 Likes
4

BTW Lyde is great, I’ve been listening to him loads over the last few days.

Awesome scene too, I watched for quite a while to see if the runner would get out of sync with the music but nope…

1 Like
5

Honestly, sync was the hardest part :sweat_smile:

6

Yeah I figured, been there :sweat_smile:

1 Like
7

this is so great, and thank you for the tutorial code :bowing_man: , i’m still learning on how to create an endless terrain

1 Like
8

@boxofimagination You’re welcome :slight_smile:

9

Just a small addition to what has been said above.
In one of my posts, I mentioned that - as in this example - I was having a problem with textures becoming blurry out only a short distance out when viewed at low elevations. When scrolling through the latest three.js examples, I realized that I could partly solve that issue by setting the material anistropy property. That option may not be available for all graphics cards and may slow things down a bit. I expect that you are well-versed in the mysteries of anistropy. So I am merely adding this tidbit of information for the benefit of others who, like myself, are just learning about these kinds of things.