babylon.js高度图

 

<canvas id="renderCanvas" touch-action="none"></canvas>

<style>
    html,
    body {
        margin: 0;
        padding: 0;
    }
    
    #renderCanvas {
        width: 100%;
        height: 56.2vw;
        touch-action: none;
        display: block;
        font-size: 0;
    }
</style>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<script>
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);
    var sunPos = 0;
    var radius = 50;

    var createScene = function() {
        var scene = new BABYLON.Scene(engine);

        // Light
        var spot = new BABYLON.PointLight("spot", new BABYLON.Vector3(0, 30, 10), scene);
        spot.diffuse = new BABYLON.Color3(1, 1, 1);
        spot.specular = new BABYLON.Color3(0, 0, 0);

        // Camera
        var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, .8, 100, BABYLON.Vector3.Zero(), scene);
        camera.lowerBetaLimit = 0.1;
        camera.upperBetaLimit = Math.PI / 2 * 0.9;
        camera.lowerRadiusLimit = 30;
        camera.upperRadiusLimit = 150;
        camera.attachControl(canvas, true);

        // Ground
        var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
        groundMaterial.diffuseTexture = new BABYLON.Texture("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/ireland-colormap.jpg", scene);

        var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/ireland-heightmap.jpg", 200, 200, 250, 0, 3, scene, false);
        ground.material = groundMaterial;

        //Sphere to see the light's position
        var sun = BABYLON.Mesh.CreateSphere("sun", 10, 4, scene);
        sun.material = new BABYLON.StandardMaterial("sun", scene);
        sun.material.emissiveColor = new BABYLON.Color3(1, 1, 0);

        // Skybox
        var skybox = BABYLON.Mesh.CreateBox("skyBox", 800.0, scene);
        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
        skyboxMaterial.backFaceCulling = false;
        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.disableLighting = true;
        skybox.material = skyboxMaterial;

        //Sun animation
        scene.registerBeforeRender(function() {
            sun.position = spot.position;
            spot.position.x = radius * Math.cos(sunPos);
            spot.position.z = radius * Math.sin(sunPos);
            sunPos += 0.01;
        });

        return scene;
    };

    var scene = createScene();
    engine.runRenderLoop(function() {
        scene.render();
    });

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