Sky, Water and Sun

The Hawaii On the Ocean example shows that we can create the appearance of water, sky, and sun in our 3D maps. Note that the Geo needs to have already been transformed as in the previous tutorial.

To get started, we will need to include the THREE.js files Water.js and Sky.js. The sky class handles drawing the sky and the sun. We will also need to include the CM3SkyAndWater.js file.

<script src="https://gsp.humboldt.edu/Archive/Libraries/ThreeJS/4.5/examples/js/objects/Water.js"></script>
<script src="https://gsp.humboldt.edu/Archive/Libraries/ThreeJS/4.5/examples/js/objects/Sky.js"></script>

<script src="js/CM3SkyAndWater.js"></script>

We will need to access the SkyAndWater object from our animation function so we set it up as a global variable.

var SkyAndWater=new CM3SkyAndWater();

Then, in our OnLoad() function, we set the settings for the dimensions of the water and sky and set the initial sun angle.

 
   SkyAndWater.SetSetting("Dimensions","SceneWidth",SceneWidth); // Dimensions of the water and sky in Scene units
   SkyAndWater.SetSetting("Dimensions","SceneDepth",SceneDepth);
   SkyAndWater.SetSetting("Sun","Inclination",180); // Angle of the sun in degrees above the setting sun horizon (i.e. 0=setting, 180=rising)
   SkyAndWater.Setup(TheScene);

To make the water move, we need to create an animation function and call it at the end of our OnLoad function.

function Animate() 
{
	requestAnimationFrame( Animate ); // innitiates the next call to the Animation function
	
	SkyAndWater.Animate(); //  Updates the water so it looks like it is moving
}

To make the sun move across the sky, we need to update the Inclination setting for the sun each time we go through our animation loop.

function Animate() 
{
	requestAnimationFrame( animate );
	
	var Inclination=SkyAndWater.GetSetting("Sun","Inclination"); // get the current inclination setting
	Inclination-=.1; // change this value to have the sun move faster or slower across the sky
	if (Inclination<0) Inclination=360; // when the inclination goes negative, we need to move it back to 360
	SkyAndWater.SetSetting("Sun","Inclination",Inclination); // set the new inclination value
	
	SkyAndWater.Animate();
}