How to Refresh React UI Based on Scene Changes using SceneSwitcher

🌵 Needle Engine
1

Hi,

I was experimenting with Needle and React for the UI. I have a base scene and 4 or more scenes that are loaded or unloaded using a SceneSwitcher. The React UI should display content based on the loaded scene.

Each scene has a manager script that contains this information, and I can retrieve that script using FindObjectOfType, which works fine. However, the issue is: how can I refresh the React UI whenever a scene is loaded?

2

Hi Ashok,

To refresh your React UI whenever a scene is loaded with the SceneSwitcher in Needle Engine, you can utilize the event callbacks provided by the SceneSwitcher. You’ll specifically want to listen for the scene-opened event to detect when a new scene has been loaded.

Here’s a step-by-step approach along with the code.

Pseudocode Plan:

  1. Initialize the SceneSwitcher and add an event listener for scene-opened.
  2. When the event is triggered, retrieve the data from the currently loaded scene.
  3. Update your React UI state based on the newly loaded scene.

Code:

import React, { useEffect, useState } from 'react';
import { SceneSwitcher } from "@needle-tools/engine";

const MyComponent = () => {
    const [currentSceneInfo, setCurrentSceneInfo] = useState(null);

    useEffect(() => {
        const sceneSwitcher = findObjectOfType(SceneSwitcher);
        
        // Check if SceneSwitcher is found
        if (sceneSwitcher) {
            const sceneOpenedHandler = (event) => {
                const sceneUrl = event.detail.scene.url; // Get the URL of the loaded scene
                setCurrentSceneInfo(sceneUrl); // Update the state with new scene info
            };
            
            // Add event listener
            sceneSwitcher.addEventListener("scene-opened", sceneOpenedHandler);
            
            // Cleanup event listener on component unmount
            return () => {
                sceneSwitcher.removeEventListener("scene-opened", sceneOpenedHandler);
            };
        }
    }, []);

    return (
        <div>
            <h1>Current Scene: {currentSceneInfo}</h1>
            {/* Render additional UI elements based on the current scene */}
        </div>
    );
};

export default MyComponent;

Explanation:

  • The MyComponent React component initializes the state to hold the current scene information.
  • It sets up an effect to retrieve the SceneSwitcher instance and register an event listener for scene-opened.
  • When a scene is loaded, the URL is retrieved from the event and the state is updated, which will re-render the component with the new data.

This structure allows your React UI to respond any time a scene switch occurs. You can further customize the event handling logic to update UI components as needed.

Feel free to ask if you have further questions or need additional assistance!

1 replies left - Get a PRO license for more AI replies.
thread_Ba0wtinRJkXEm1z5rg1txiTy
Reply to this message to continue the conversation

3

For completeness: here’s the API docs for the SceneSwitcher component which shows which events are available SceneSwitcher | Needle Engine

And you can access the scene that was last loaded with currentlyLoadedScene

4

This event callback is what i wanted. Thanks

5

This topic was automatically closed 13 days after the last reply. New replies are no longer allowed.