test-babylon

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style>
   html, body, div, canvas {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
    }
</style>

<script src="babylon.1.9.0.js"></script>
<script src="hand-1.3.7.js"></script>
<script src="water/water.js"></script>
</head>

<body>
	<div id="rootDiv">
	  <canvas id="renderCanvas"></canvas>
	</div>
</body>

<script type="text/javascript">
	// Get the canvas element from our HTML below
	var canvas = document.getElementById("renderCanvas");
	// Load BABYLON 3D engine
	var engine = new BABYLON.Engine(canvas, true);
	var scene = new BABYLON.Scene(engine);

	// Creating a camera looking to the zero point (0,0,0), a light, and a sphere of size 1
	var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 50, new BABYLON.Vector3(0, 0, 0), scene);
	var camerasBorderFunction = function () {
        //Angle
        if (camera.beta < 0.1)
            camera.beta = 0.1;
        else if (camera.beta > (Math.PI / 2) * 0.9)
            camera.beta = (Math.PI / 2) * 0.9;

		//Zoom
        if (camera.radius > 512)
            camera.radius = 512;

        if (camera.radius < 30)
            camera.radius = 30;
    };
    scene.registerBeforeRender(camerasBorderFunction);
	camera.attachControl(canvas);
	scene.activeCamera.attachControl(canvas);

	// World lighting
	var sun = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(60, 100, 10), scene);

	// Random sphere
	//var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);

	// Skybox
	var skybox = BABYLON.Mesh.CreateBox("skyBox", 1024.0, scene);
	var skyboxMaterial = new BABYLON.StandardMaterial("skybox", scene);
	skyboxMaterial.backFaceCulling = false;
	skybox.material = skyboxMaterial;
	skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
	skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
	skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("skybox/skybox", scene);
	skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

	//Terrain
	var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
	groundMaterial.diffuseTexture = new BABYLON.Texture("terrain/dwaldocm.jpg", scene);
	var groundPlane = BABYLON.Mesh.CreatePlane("groundPlane", 0.0, scene);
	groundPlane.material = groundMaterial;
	var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "terrain/dwaldo.jpg", 512, 512, 250, 0, 40, scene, false);
	ground.position.y = 0.0;
	ground.material = groundMaterial;

	// Water
	BABYLON.Engine.ShadersRepository = "";
	var water = BABYLON.Mesh.CreateGround("water", 1000, 1000, 1, scene, false);
	var waterMaterial = new WaterMaterial("water", scene, sun);
	waterMaterial.refractionTexture.renderList.push(ground);
	waterMaterial.reflectionTexture.renderList.push(ground);
	waterMaterial.reflectionTexture.renderList.push(skybox);
	water.material = waterMaterial;


	// Once the scene is loaded, just register a render loop to render it
	engine.runRenderLoop(function () {
		scene.render();
	});
</script>
</html>