How to have multiple scenes

🌵 Needle Engine
1

One scene that serves as the front page and is scrollable(something like Needle home page) and the second scene or other scene will be the actual AR experience in unity

2

Hi Yusuf Toyosi,

To implement multiple scenes in Needle Engine, including a scrollable front page and an AR experience, you can follow these steps:

  1. Create Two Scenes:

    • One scene for the front page (e.g., a scrollable homepage).
    • Another scene for the actual AR experience.

  2. Use SceneSwitcher Component:

    • Add the SceneSwitcher component to the root object of your main scene (the scrollable homepage).
    • Assign the AR scene and the homepage scene to the scenes array in the SceneSwitcher component.

  3. Implement Scrollable Functionality:

    • For the scrollable homepage, create your UI elements (e.g., panels or sections) and structure them for scrolling. Use CSS for styling, or utilize Needle Engine’s UI components.

  4. Switching Between Scenes:

    • Set up UI buttons or events in the homepage to switch to the AR scene. Use the sceneSwitcher.switchScene() method to transition to the AR scene.

  5. Example Code for Switching Scene:

    import { SceneSwitcher } from "@needle-tools/engine";

class MySceneController {
    private sceneSwitcher: SceneSwitcher;

    constructor(sceneSwitcher: SceneSwitcher) {
        this.sceneSwitcher = sceneSwitcher;
    }

    public goToARScene() {
        const arScene = this.sceneSwitcher.scenes[1]; // Assuming index 1 is the AR scene
        this.sceneSwitcher.switchScene(arScene).then(() => {
            console.log("Switched to AR Scene");
        });
    }
}

  6. AR Setup:

    • In your AR scene, add the required components such as WebARSessionRoot for AR functionality.
    • Make sure to enable additional features like user scaling or teleportation as needed.

  7. Testing:

    • Test interactions between the scenes and ensure correct loading and unloading behavior is maintained.

You can find more detailed examples on implementing multiple scenes and scene switching in the Needle Engine samples repository and the official documentation (see the documentation) (see the documentation).

If you have specific questions about a particular implementation or setup, feel free to ask!

3 replies left
thread_Qt3ne7fEttyU8veSaMGo7tj5
Reply to this message to continue the conversation

3

You could also take a look at the sveltekit template

It’s not exactly setup like that but you could have one page with the <needle-engine src="path/to/your/ar.glb"></needle-engine> component and another page with the scroll content (e.g. switched by a SceneSwitcher component as suggested by the bot)

4

Thanks bot, the 2 scenes will be needles or unity scenes?

5

How to setup, please

6

Hi Yusuf Toyosi,

To set up multiple scenes in Needle Engine, follow these detailed steps:

Step 1: Create the Scenes

  1. Front Page Scene:

    • Design the homepage layout. You can use containers or panels for different sections (e.g., header, content, footer) to make it scrollable.

  2. AR Scene:

    • Set up a new scene where the AR experience will take place. Make sure to include any necessary components for AR, such as WebARSessionRoot.

Step 2: Use Unity for Scene Management

  1. Add the Required Components:
    • In your Unity project, create a GameObject and add the SceneSwitcher component.
    • Assign your created scenes (Front Page and AR Scene) to the scenes list in the SceneSwitcher.

Step 3: Implement Scrollable Front Page

  1. Design the Scrollable Layout:
    • Use a Scroll Rect component with UI elements as children to create a scrollable area. Set the layout options according to your design needs.

Step 4: Switch Between Scenes

  1. Set Up Button to Switch Scenes:
    • Create a UI button in the Front Page scene that users will click to start the AR experience.
    • Use the following code snippet in the button’s event handler to switch scenes:
import { SceneSwitcher } from "@needle-tools/engine";

class MySceneController {
    constructor(private sceneSwitcher: SceneSwitcher) {}

    public goToARScene() {
        this.sceneSwitcher.switchScene('ARSceneName') // Replace with your actual AR scene name
            .then(() => {
                console.log("Switched to AR Scene");
            });
    }
}

Step 5: Testing

  1. Run Your Application:
    • Test the functionality by running the application in Unity and clicking the button on your front page. Ensure it transitions smoothly to the AR scene.

Additional Considerations

  • Styling: Use CSS or Needle Engine’s styling options to enhance the appearance of UI elements.
  • Optimization: Manage the loading time between scenes and ensure assets are optimized for mobile devices if deploying to AR environments.

For further examples and functionalities, check the Needle Engine samples and documentation (see the documentation) (see the documentation).

Let me know if you need more specific details!

3 replies left
thread_Qt3ne7fEttyU8veSaMGo7tj5
Reply to this message to continue the conversation