How to get Scene Switcher loading progress value

🌵 Needle Engine
1

Hi, As my scene is taking more than 20 sec to load. I would like to put progress bar in my loading scene as like default loading bar.

Original Post on Discord

by user 1141289362336784394

2

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.

Help requested: please wait a moment…

3

Here is what I found for you :brain: Discord

4

Hello Yokesh Immersive,

To add a progress bar similar to the default loading bar in Needle Engine, you can define custom event function names for the loadstart, progress, and loadfinished attributes within the <needle-engine> element. This allows you to track the loading progress and update your custom progress bar accordingly.

Here’s an example setup in pseudocode:

  1. Define event functions in your script.
  2. Assign those functions to the loadstart, progress, and loadfinished attributes of <needle-engine>.
  3. In the loadstart function, create and display your progress bar element.
  4. In the progress function, update the progress bar based on the progress value.
  5. In the loadfinished function, hide or remove the progress bar.

Now, I’ll provide the code example:

// Define the custom event functions for loading events
function onLoadingStart() {
    // Show your progress bar element
}

function onLoadingProgress(event) {
    // Update your progress bar
    const progress = event.detail; // Get the loading progress percentage from the event
}

function onLoadingFinished() {
    // Hide or remove your progress bar
}

// Assign the custom event handler names to the <needle-engine> attributes
const needleEngineElement = document.querySelector('needle-engine');
needleEngineElement.setAttribute('loadstart', 'onLoadingStart');
needleEngineElement.setAttribute('progress', 'onLoadingProgress');
needleEngineElement.setAttribute('loadfinished', 'onLoadingFinished');

// Add the event listeners to the <needle-engine> element
needleEngineElement.addEventListener('loadstart', onLoadingStart);
needleEngineElement.addEventListener('progress', onLoadingProgress);
needleEngineElement.addEventListener('loadfinished', onLoadingFinished);

thread_X8vYUlLjXNw7Jk8DEFgFtxNb

5

Make sure you implement the appropriate logic within the onLoadingStart, onLoadingProgress, and onLoadingFinished functions to handle the visibility and state of the custom progress bar you are creating (see the documentation).

1 messages left GPT 4
thread_X8vYUlLjXNw7Jk8DEFgFtxNb

6

@Yokesh Immersive heads up the reply from the bot doesnt have anything to do with the SceneSwitcher. I dont think the progress is exposed - you’re using the loading scene callback event for this?

7

I’ll add an event for it for the next version

8

The latest version 3.28.7 contains a progress event that you can subscribe to. See the changelog :slightly_smiling_face:

9

Thank you so much for the quick update :slightly_smiling_face:

by user 1141289362336784394