zhangyupeng
/
Babylon.js


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Local Development</title>
	
    <script src="https://babylonjs.azurewebsites.net/cannon.js"></script>
    <script src="https://babylonjs.azurewebsites.net/Oimo.js"></script>
	<script src="../assets/refs/dat.gui.min.js"></script>
	<script src="../tools/DevLoader/BabylonLoader.js"></script>
	<script src="src/webgl-debug.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;
			right: 10px;
			width: 60px;
			height: 20px;
		}
	</style>
</head>
<body>
	<div id="fps">0</div>
	<canvas id="renderCanvas"></canvas>
	
	<script>
		var canvas = document.getElementById("renderCanvas");
		// canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(canvas);
		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();

					if (scene) {
						// 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>