zhangyupeng
/
Babylon.js


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Local Development</title>

    <script src="../dist/preview%20release/babylon.max.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" touch-action="none"></canvas>

    <script>
        var canvas = document.getElementById("renderCanvas");
        var divFps = document.getElementById("fps");

        // Global to simulate PG.
        var engine = new BABYLON.Engine(canvas, true, { stencil: true, disableWebGL2Support: false, preserveDrawingBuffer: true });

        if (BABYLON.Engine.isSupported()) {

            // This creates a basic Babylon Scene object (non-mesh)
            var scene = new BABYLON.Scene(engine);

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

            camera.attachControl(canvas, true);

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

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

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

            // Default intensity is 1. Let's dim the light a small amount
            light.intensity = 0.7;

            // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
            var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

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

            // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
            var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);            


            engine.runRenderLoop(function () {
                if (scene.activeCamera) {
                    scene.render();
                }
                divFps.innerHTML = engine.getFps().toFixed() + " fps";
            });
        }

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>