Jump to content

UI splashscreen while loading CreateGroundFromHeightMap


Recommended Posts

     Is there a way to show the UI spash screen when loading the CreateGroundFromHeightMap function. My height map is large and takes some

time to load. I was wondering how to get the UI spash screen to appear while the browser loads the heightmap. I am using typescript, and I have

trying wrapping the method in this.scene.executeWhenready() around:

BABYLON.Mesh.CreateGroundFromHeightMap("terrain", "heightmaps/lake-taupo-15m-dem.png", 2000, 2000, 1500, 0, 100, this.scene, false);    

but it says addMesh() is undefined. I tryied using

        var imageTask = this.assetsManager.addImageTask("image task", "heightmaps/lake-taupo-15m-dem.png");
            imageTask.onSuccess = function(task) {
               BABYLON.Mesh.CreateGroundFromHeightMap("terrain",task.url, 2000, 2000, 1500, 0, 100, this.scene, false);  

but I get the same error. 

Link to comment
Share on other sites

@conic79 -

First of all, I would setup your "splash screen" media in you html file and not in your babylon scene - such as loading a video in the example below:

<video id='some_document_ID' loop>
  <source src="./file.mp4" type="video/mp4" >

But don't initialize your scene until your assets are loaded and/or whatever conditions need to be met. Your issue is that you are initializing your scene and attempting to register a function after initialzation. Instead, wrapping this into a function is the simplest method such as the following:

Set your scene variables to call in a function after the loader has completed loading all assets:

    var canvas          = document.getElementById("game");
    var engine          = new BABYLON.Engine(canvas, true);
    var scene           = new BABYLON.Scene(engine);
    var camera          = null;


Then define the AssetsManager:

var loader = new BABYLON.AssetsManager(scene);

//load your assets

//Wrap your scene in a function to call once you assets are loaded such as:

loader.onFinish = function() {

        init3d(scene, canvas); //this is a function to call which initializes the scene AFTER your assets are loaded and/or other conditions are met

//other stuff if necessary



Now set a function to initialize your scene:

function init3d (scene, canvas) {  

//define scene



Alternatively, you can use a RegisterBeforeRender function, but the above method provides far more flexability - your choice.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...