zhangyupeng
/
Babylon.js


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

	  #renderCanvas {
	    width: 100%;
	    height: 100%;
	    touch-action: none;
	  }
	</style>
	</head>
	<body>
		<canvas id="renderCanvas"></canvas>
		<script src="tools/DevLoader/BabylonLoader.js"></script>
		<script>
		"use strict";
		BABYLONDEVTOOLS.Loader
			.load(function() {
				// Get the canvas element from our HTML above
				var canvas = document.getElementById("renderCanvas");

				// Load the BABYLON 3D engine
				var engine = new BABYLON.Engine(canvas, true);

				// This begins the creation of a function that we will 'call' just after it's built
				var createScene = function() {

					// Now create a basic Babylon Scene object 
					var scene = new BABYLON.Scene(engine);

					// Change the scene background color to green.
					scene.clearColor = new BABYLON.Color3(0, 1, 0);

					// This creates and positions a free camera
					var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

					// This targets the camera to scene origin
					camera.setTarget(BABYLON.Vector3.Zero());

					// This attaches the camera to the canvas
					camera.attachControl(canvas, false);

					// This creates a light, aiming 0,1,0 - to the sky.
					var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

					// Dim the light a small amount
					light.intensity = .5;

					// Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene
					var squareSize = 20;
					var spheres = []
					for (var i = 0; i < squareSize; i++) {
						for (var j = 0; j < squareSize; j++) {
							for (var k = 0; k < 5; k++) {
								var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 0.5, scene);

								// Move the sphere upward 1/2 its height
								sphere.position.z = - squareSize / 4 + j / 2;
								sphere.position.x = - squareSize / 4 + i / 2;
								sphere.position.y = - squareSize / 4 + k / 2;
								if (j === 0) {
									sphere.material = new BABYLON.StandardMaterial("test");
									sphere.material.diffuseTexture = new BABYLON.Texture("test.jpeg", scene);
									sphere.material.bumpTexture = new BABYLON.Texture("test.jpeg", scene);
									sphere.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random());
									sphere.material.specularColor = new BABYLON.Color3(Math.random() < 0.8 ? 0 : 1, Math.random() < 0.8 ? 0 : 1, Math.random() < 0.8 ? 0 : 1);
									sphere.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
									sphere.material.freeze();
								}
								else {
									sphere.material = spheres[0].material;
								}
								sphere.freezeWorldMatrix();
								spheres.push(sphere);
							}
						}
					}
							var t = 0;
							scene.registerAfterRender(function() {
								for (var i = 0; i < spheres.length; i++) {
									// spheres[i].material.diffuseColor = new BABYLON.Color3(Math.abs(Math.sin(t/100)), Math.abs(Math.cos(t/200)), Math.abs(Math.sin(t/500)));
									// if (t % 120 < 60) {
									// 	spheres[i].material.freeze();
									// } else {
									// 	spheres[i].material.unfreeze();
									// }
									
								}
								light.direction = new BABYLON.Vector3(Math.cos(t / 30), 1, Math.sin(t / 30));
									t++;
							});

					// Let's try our built-in 'ground' shape.  Params: name, width, depth, subdivisions, scene

					// Leave this function
					return scene;

				}; // End of createScene function

				// Now, call the createScene function that you just finished creating
				var scene = createScene();

				// Register a render loop to repeatedly render the scene
				engine.runRenderLoop(function () {
				  scene.render();
				});

				// Watch for browser/canvas resize events
				 window.addEventListener("resize", function () {
				   engine.resize();
				 });
			});
		</script>
	</body>
</html>