zhangyupeng
/
Babylon.js


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Local Development</title>
	<script src="../assets/refs/dat.gui.min.js"></script>
	<script src="../tools/DevLoader/BabylonLoader.js"></script>

	<style>
		html, body {
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
			overflow: hidden;
		}

		#renderCanvas {
			width: 100%;
			height: 100%;
		}

		#fps {
			position: absolute;
			background-color: black;
			border: 2px solid red;
			text-align: center;
			font-size: 16px;
			color: white;
			top: 15px;
			left: 10px;
			width: 60px;
			height: 20px;
		}
	</style>
</head>
<body>
	<div id="fps">0</div>
	<canvas id="renderCanvas"></canvas>
	
	<script>
		var canvas = document.getElementById("renderCanvas");
		var divFps = document.getElementById("fps");

		// Global to simulate PG.
		var engine = null;

		// Allow querystring to navigate easily in debug in local samples.
		var indexjs = 'src/index';
		var sampleSearch = /sample=([0-9]+)/i;
		var matches = null;
		if ((matches = sampleSearch.exec(window.location)) !== null) {			
			indexjs += '.';
			indexjs += matches[1];
		}
		indexjs += '.js';

		// Load the scripts + map file to allow vscode debug.
		BABYLONDEVTOOLS.Loader
			.require(indexjs)
			.load(function() {
				if (BABYLON.Engine.isSupported()) {
					engine = new BABYLON.Engine(canvas, true, { stencil: true });					
					BABYLONDEVTOOLS.Loader.debugShortcut(engine);			

					// call the scene creation from the js.
					var scene = createScene();

					// Register a render loop to repeatedly render the scene
					engine.runRenderLoop(function () {
						scene.render();
						divFps.innerHTML = engine.getFps().toFixed() + " fps";
					});

					// Resize
					window.addEventListener("resize", function () {
						engine.resize();
					});
					
				}
				else {
					alert('BabylonJS is not supported.')
				}
			});
	</script>
</body>
</html>