Loading Screen Customize

Yes because you can not use a local path from disc like that. Change the paths to “assets/yourglbname.glb” instead

Or ./assets/forRecording.glb"

But wait why do you do this in the first place :sweat_smile: you dont need to do this

It was just meant as an example for how to use those callbacks :slightly_smiling_face: the files are already referenced and loaded via the engine codegen. You only maybe want the line 36 to prevent the default loading screen from showing up and to add your own loading image

I can try to make you an example tomorrow

It would be great if you have the time. It’s a little bit of chinese for me:PandaSad: . Now it looks like this. It freeze because of loading, also in the scene loaded I can’t use scroll.:joy:

by user 328144332622266369

Hi @Nebula(Larisk) I’m working on making this whole process a bit easier and just assigning a loadingScene to the SceneSwitcher (which would then be the scene you have already with the fixed camera and cube animation) - here’s a technical test :slightly_smiling_face:
20230921-140009_Main_Scene_-_Google_Chrome-logo.mp4

The setup will then be just: assign the scene you want to be visible while another scene is loading in the SceneSwitcher
image.png

And here is a little bit of code that handles adding and removing the HTML logo (I add it behind the 3d scene here because I set the camera to render a transparent background - but you can also just add it on top). I will add the code for this to the samples once I’m done

import { Behaviour, delay, ISceneEventListener } from "@needle-tools/engine";

// Put this in the root of your loading scene
export class SceneRoot extends Behaviour implements ISceneEventListener {

    private _htmlElement?: HTMLElement;

    async sceneOpening(): Promise<void> {
        if (!this._htmlElement) {
            this._htmlElement = document.createElement("div");
            this._htmlElement.style.cssText = `
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            `;
            const logo = document.createElement("img");
            logo.src = "https://engine.needle.tools/branding/needle-logo.png";
            logo.style.cssText = `
                width: 50%;
                height: auto;
            `;
            this._htmlElement.appendChild(logo);
        }
        this.context.domElement.parentElement?.prepend(this._htmlElement);
    }

    async sceneClosing(): Promise<void> {
        // Not necessary, just so that the loading scene is visible for some time
        await delay(1000);
        // Make sure to remove your HTML overlay
        this._htmlElement?.remove();
    }

}

You could also just take an existing HTML element in your index.html to add/remove it (you dont have to generate this in code, it’s just easier for the samples)

It will be included in the next update (this feature)

Wow, this makes everything easier! That’s awesome!:gentleblob: :blobaww: :cactus:

by user 328144332622266369

I’ll also added a new attribute to automatically hide the default loading overlay if you want <needle-engine hide-loading-overlay></needle-engine> (also next release)

Note that there are some attributes already to customize how it looks in the table under Loading Display Needle Engine Attributes | Needle Engine Documentation
You might need to clear your browser cache (or reload with CTRL+SHIFT+R on chrome) to see it. Sometimes updates are not visible because the page is still cached

Here’s a screenshot as well :slightly_smiling_face:

E.g. the default loading can easily be changed to this with just some html attributes - since the engine itself still needs to load this loading overlay would still be visible for a moment (unless you disable it with the attribute of course :slightly_smiling_face: )

Thank you so much for adding this features! Can’t wait to play with them! I will study and follow your instructions, and hopefully get to the desired output. :green_heart: :cactus:

by user 328144332622266369

Hi, the feature is added in the latest release. so now you can add a LoadingScene (it can be a scene or prefab refernence) to the SceneSwitcher component. Your “MainScene” should be really minimal so it loads super fast. See the screenshot above, I just have an GameObject with the SceneSwitcher + another GameObject with the ExportInfo. That’s it :slightly_smiling_face:

here is a sample script that you can add to the root object of your “LoadingScene” to receive callbacks when the scene is being loaded/unloaded. You can trigger animations from there if you want to make a nicer transition. But it’s optional. If you dont use that then the loading scene will just be removed instantly.
image.png
image.png

For completeness: in my test scene I use an animator for scaling my loading content up and down (to make the transition a bit smoother). You can totally do something like we did in https://app.songsofcultures.com now where the content is nicely hidden/animated into the scene when a scene loads with these callbacks :slightly_smiling_face: or display some other custom loading overlay if you want.
But as said above: it’s optional :slightly_smiling_face: if this doesnt exist the scene will just be replaced instantly without any transition which might or might not be desired :slightly_smiling_face:

Okay, I’ve tried today, and have some questions. The sceneSwitcher has to be attached to SceneRoot of the main Scene(not Loading)? Also, the loading scene has to be a needle scene? And do I need to add loadstart to ? If yes, in which file? because I also have Vue in the project of website.

by user 328144332622266369