zhangyupeng
/
Babylon.js


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<html>
<head>
    <meta charset="UTF-8">
    <title>camera_anim</title>
    <!-- edit path - name of babylon library as required -->
    <script src="./lib/babylon.js"></script>
    <style>
         html, body   { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } 
         #renderCanvas{ width: 100%; height: 100%; } 
         #button      {
			color: white; background-color: Dimgray;
			font-size: 14pt; font-weight: bold;
			padding-left:4pt; padding-right:4pt;
			
			border: black outset 2pt; line-height: 2em;
			cursor: pointer;
		}     
    </style>
</head>
<body>
	<div id="buttonbar" style="background-color: Darkorange;">
		<span id="button" onclick="pausePlay()"> Pause - Play </span>
	</div>
<canvas id="renderCanvas"></canvas>
<script>
    if (BABYLON.Engine.isSupported()) {
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        console.log("Babylon version:  " + BABYLON.Engine.Version);

        var running = true;
        var myCam;
        var scene;
        var url = "./TOB-out/" // edit when .babylon / texture files in a different dir than html
        BABYLON.SceneLoader.Load(url, "camera_anim.babylon", engine, 
            function (newScene) {
        	    scene = newScene; // assign so visible external function
        	    
                newScene.executeWhenReady(function () {
                    myCam = newScene.getCameraByName("Camera");
                    var myLight = newScene.getLightByID("Point"); 
                    myLight.parent = myCam;
                    // Attach camera to canvas inputs
                    newScene.activeCamera.attachControl(canvas);

                    // Once the scene is loaded, register a render loop
                    engine.runRenderLoop(function() {
                        newScene.render();
                    });
                });
            },
            function (progress) {
                // To do: give progress feedback to user
            }
        );
    }else{
        alert("WebGL not supported in this browser.\n\n" + 
              "If in Safari browser, check 'Show Develop menu in menu bar' on the Advanced tab of Preferences.  " +
              "On the 'Develop' menu, check the 'Enable WebGL' menu item.");
    }

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });
	
    function pausePlay() {
        var animatable = scene.getAnimatableByTarget(myCam);
    	if (!running)animatable.restart();
    	else animatable.pause();
    	running = !running;
    }
</script>
</body>
</html>