Back

Terrain

Since nunuStudio is built on top of three.js it is possible to use libraries that were designed to work with three. Most of base nunuStudio objects (e.g. Scene, Lights, Meshes etc) are directly based off three.js objects.

But some parts of the library were rewriten/overrided and from time to time you may encounter situations where external libraries made for three.js are not compatible with nunuStudio (e.g Post-processing, Renderers etc).

In this tutorial we will build a simple program using the THREE.Terrain library for procedurely generated terrain mesh.

It is important to understand that nunuStudio has its own resource management solution, but some resource types are based off three.js types, you should use the Material, Texture, Image, etc types available in nunuStudio. These should work for all external libraries (unless these libraries need a specific variant, in this scenario you should use the library specific types programatically).

To import external libraries into your project drag the JS file to the resource exporer then import them into your script using the import('library.js'); method after importing the file the library can be used normally.

include("THREE.Terrain.min.js");

function initialize()
{
	var terrain = THREE.Terrain({
		steps: 1,
		useBufferGeometry: false,
		easing: THREE.Terrain.Linear,
		scattering: "SimplexLayers"
	});
	scene.add(terrain);
}

Now that we got the library working we can create proper materials and textures to be attached to the library.These resource can be obtained using their name in the script object. Check previous guides for more details on the resource system and how to use them inside of scripts.

To try this example in the editor you can download the project file or open it on the Web Editor.