topherPedersen · July 25, 2018 18:29
diff --git a/BabylonJSDemo.html b/BabylonJSDemo.html
 <!DOCTYPE html>
 <!-- 
    Babylon.js Demo by Peter Kwak and Christopher Pedersen at theCoderSchool 
    in Flower Mound, TX for use teaching our introductory programming students.
    This tutorial was created to demonstrate how our students favorite game,
    www.ShellShock.io was created using JavaScript and the Babylon.js library.

    This is free and unencumbered software released into the public domain.
    For more information, please refer to <http://unlicense.org/>
 -->
 <html>
 <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <!-- Link to the last version of BabylonJS -->
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <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>
        
        window.addEventListener('DOMContentLoaded', function(){
            // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');
            // load the 3D engine
            var engine = new BABYLON.Engine(canvas, true);
            // createScene function that creates and return the scene
            
            var createScene = function(){
                // create a basic BJS Scene object
                var scene = new BABYLON.Scene(engine);
                
                // create a basic light, aiming 0,1,0 - meaning, to the sky
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
                
                // create a built-in "ground" shape;
                var ground = BABYLON.Mesh.CreateGround('ground1', 18, 18, 2, scene);
                
                // create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation 
                var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
                
                // move the sphere upward 1/2 of its height
                sphere.position.y = 1;
                
                // Parameters: name, position, scene    
                var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 10, -10), scene);

                //The goal distance of camera from target
                camera.radius = 30;

                // The goal height of camera above local origin (centre) of target
                camera.heightOffset = 10;

                // The goal rotation of camera around local origin (centre) of target in x y plane
                camera.rotationOffset = 0;

                //Acceleration of camera in moving from current to goal position
                camera.cameraAcceleration = 0.005

                //The speed at which acceleration is halted 
                camera.maxCameraSpeed = 10

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

                // NOTE:: SET CAMERA TARGET AFTER THE TARGET'S CREATION AND NOTE CHANGE FROM BABYLONJS V 2.5
                //targetMesh created here
                // camera.target = targetMesh;   // version 2.4 and earlier
                camera.lockedTarget = sphere; //version 2.5 onwards

                
                // return the created scene
                return scene;
            }
            
            
            // call the createScene function
            var scene = createScene();
            
            // create a global variable so we can control our player sprite (sphere)
            var egg = scene.getMeshByName("sphere1");
            
            // Create Game Controls (Moves Player Sprite)
            window.addEventListener("keydown", function(e) {
              var key = e.key;
              console.log(key);
              switch(key) {
                // NOTE: up/down game controls are flipped upside down (fixes gameplay bug)
                case "s":
                  egg.position.z += 0.5;
                  break;
                case "w":
                  egg.position.z -= 0.5;
                  break;
                case "d":
                  egg.position.x += 0.5;
                  break;
                case "a":
                  egg.position.x -= 0.5;
                  break;
                case "ArrowDown":
                  egg.position.z += 0.5;
                  break;
                case "ArrowUp":
                  egg.position.z -= 0.5;
                  break;
                case "ArrowLeft":
                  egg.position.x += 0.5;
                  break;
                case "ArrowRight":
                  egg.position.x -= 0.5;
                  break;
              }   
            });

            // run the render loop
            engine.runRenderLoop(function(){
                scene.render();
            });
            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<!--
	Babylon.js Demo by Peter Kwak and Christopher Pedersen at theCoderSchool
	in Flower Mound, TX for use teaching our introductory programming students.
	This tutorial was created to demonstrate how our students favorite game,
	www.ShellShock.io was created using JavaScript and the Babylon.js library.

	This is free and unencumbered software released into the public domain.
	For more information, please refer to <http://unlicense.org/>
	-->
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
	<title>Babylon - Getting Started</title>
	<!-- Link to the last version of BabylonJS -->
	<script src="https://cdn.babylonjs.com/babylon.js"></script>
	<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>

	window.addEventListener('DOMContentLoaded', function(){
	// get the canvas DOM element
	var canvas = document.getElementById('renderCanvas');
	// load the 3D engine
	var engine = new BABYLON.Engine(canvas, true);
	// createScene function that creates and return the scene

	var createScene = function(){
	// create a basic BJS Scene object
	var scene = new BABYLON.Scene(engine);

	// create a basic light, aiming 0,1,0 - meaning, to the sky
	var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

	// create a built-in "ground" shape;
	var ground = BABYLON.Mesh.CreateGround('ground1', 18, 18, 2, scene);

	// create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
	var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

	// move the sphere upward 1/2 of its height
	sphere.position.y = 1;

	// Parameters: name, position, scene
	var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 10, -10), scene);

	//The goal distance of camera from target
	camera.radius = 30;

	// The goal height of camera above local origin (centre) of target
	camera.heightOffset = 10;

	// The goal rotation of camera around local origin (centre) of target in x y plane
	camera.rotationOffset = 0;

	//Acceleration of camera in moving from current to goal position
	camera.cameraAcceleration = 0.005

	//The speed at which acceleration is halted
	camera.maxCameraSpeed = 10

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

	// NOTE:: SET CAMERA TARGET AFTER THE TARGET'S CREATION AND NOTE CHANGE FROM BABYLONJS V 2.5
	//targetMesh created here
	// camera.target = targetMesh; // version 2.4 and earlier
	camera.lockedTarget = sphere; //version 2.5 onwards


	// return the created scene
	return scene;
	}


	// call the createScene function
	var scene = createScene();

	// create a global variable so we can control our player sprite (sphere)
	var egg = scene.getMeshByName("sphere1");

	// Create Game Controls (Moves Player Sprite)
	window.addEventListener("keydown", function(e) {
	var key = e.key;
	console.log(key);
	switch(key) {
	// NOTE: up/down game controls are flipped upside down (fixes gameplay bug)
	case "s":
	egg.position.z += 0.5;
	break;
	case "w":
	egg.position.z -= 0.5;
	break;
	case "d":
	egg.position.x += 0.5;
	break;
	case "a":
	egg.position.x -= 0.5;
	break;
	case "ArrowDown":
	egg.position.z += 0.5;
	break;
	case "ArrowUp":
	egg.position.z -= 0.5;
	break;
	case "ArrowLeft":
	egg.position.x += 0.5;
	break;
	case "ArrowRight":
	egg.position.x -= 0.5;
	break;
	}
	});

	// run the render loop
	engine.runRenderLoop(function(){
	scene.render();
	});
	// the canvas/window resize event handler
	window.addEventListener('resize', function(){
	engine.resize();
	});
	});
	</script>
	</body>
	</html>
No results found