on webgl, Writings, Tutorials, ThreeJS, Code

Seeing sounds [Part 3]: Star field + Terrain

Previously, we learned how to create an animating star field in part 1 of the Seeing Sounds series with the outcome below:

Then, in part 2, we learned how to create the following terrain:

In this tutorial, all we will do is combine the code produced from these two lessons to produce a terrain at the bottom with a starfield flying above it. This is so simple that it can be explained in just one step:

Step 1 of 1: Combine the code

All we need to do to combine these scenes is add the new bits of code from part 2 to the code from the end of part 1. That is, we need to insert the addLight and addGround functions, and the Perlin noise generator code, and also the Perlin variables to the top of our file. Doing so will produce our combined scene as below:

The entire code can be seen here on GitHub