How to use ?

How to use:

First, you need to include the material in your project like any other library:

<script src="water-material.js" type="text/javascript"></script>

Then, you must load a normal map for the water (using the a THREE.TextureLoader):

var textureLoader = new THREE.TextureLoader();
textureLoader.load('waternormals.jpg', onLoad, onProgress, onError);

Fine. Now let's see what happen when the texture is loaded:

function onLoad(waterNormalMap){
	waterNormalMap.wrapS = waterNormalMap.wrapT = THREE.RepeatWrapping;

Here we just set the wrapping mode for the texture. We set it to THREE.RepeatWrapping.

	// Declare the 'water' variable globally so you can use it in your game loop. We'll see why later.
	water = new THREE.Water(renderer, camera, scene, {
		textureWidth: 512,
		textureHeight: 512,
		waterNormals: waterNormalMap,
		alpha: 	1.0,
		sunDirection: sun.position.normalize(), // Or just set the direction of the sun you are using
		sunColor: 0xfcf8c7,
		waterColor: 0x00161e,
	});

This create the ocean water context. Now you can use it on any THREE.Mesh you want like this:

	var planeGeom = new THREE.PlaneBufferGeometry(1000, 1000, 10, 10);
	var waterPlane = new THREE.Mesh(planeGeom, water.material);
	waterPlane.add(water);
	
	scene.add(waterPlane);
}

Fine ! Setup finished ! Well, not at all. You must update the water shader time uniform and render the water in your main game loop. This is why the water context must be accessible here.

function loop(delta){ // 'delta' is the time in seconds since the last frame (the last loop)
	if(water){
		water.material.uniforms.time.value += delta;
		water.render();
	}
	
	renderer.render(scene, camera);
}

Done !