Gameplay mode switch problem within a project

🧑‍💻 Technical Support
1

Dear 8th Wall Technical Support,

I’m currently developing two WebAR projects using the 8th Wall platform and A-Frame. Each project supports two gameplay modes and allows the user to switch between them via a button. However, I’m encountering two technical issues, I already published the project:

Gameplay Overview:

  • Gameplay 1:
    The 3D model is placed on a horizontal ground plane. Players must tilt their phones to find and tap a hidden “Mark” on the model’s surface to reveal the story text.

  • Gameplay 2:
    The 3D model is anchored on the user’s palm. Players tilt their hand to change the model’s opacity; when the model becomes fully transparent, the story text inside is revealed.

  • Gameplay 3:
    The 3D model flies around in the sky. Players must aim steadily at the model for ~5 seconds to “unlock” the memory and display the story text.

Project 1: Switching between Gameplay 1 and Gameplay 3

Issue:
When switching from Gameplay 1 to Gameplay 3 and uploading a new image (which triggers a MeshyAI 3D model), two models appear:

  • One remains at the original grounded position (from Gameplay 1)

  • Another flies around in the sky (Gameplay 3 behavior)

Suspected Cause:
It seems that the previously loaded components (or entities) are not being fully removed or cleaned up, even after calling removeAttribute() and clearing innerHTML.

Project Link: Niko_GameSwap_1

Project 2: Switching between Gameplay 1 and Gameplay 2

Issue:
Gameplay 1 loads and runs correctly. But when switching to Gameplay 2, the photo upload triggers a network error (while it works when Gameplay 2 is loaded directly).

Suspected Cause:
Likely due to JavaScript component registration conflicts, or issues with shared input elements and asynchronous timing between gameplay modes.

Project Link: Niko_GameSwap_2

Technical Context:

  • Each gameplay registers its own A-Frame component: meshy-markpoint, meshy-revealhand, and meshy-flyaround.

  • Switching is handled via a shared swap-gameplay.js, where we use .setAttribute() and .removeAttribute() to attach/detach gameplay components.

  • The DOM structure includes shared <a-entity id="orbEntity"> for Gameplay 1 & 2, and <a-entity id="skyContainer"> for Gameplay 3.

  • Photo uploads are triggered from shared input elements, using base64 image transfer to a Flask backend via Ngrok, which in turn calls OpenAI and MeshyAI APIs to generate story text and 3D models.

Questions:

  1. What’s the recommended way to fully clear a component and its internal effects (e.g. child entities, animation state, event listeners) before switching modes in A-Frame?

  2. Is there a best practice to reload or reinitialize A-Frame components dynamically ?

  3. What’s the proper way to manage shared UI elements like <input> and <button> across multiple gameplay scripts, especially when switching logic is involved?

  4. Do you have an official example or template that demonstrates clean component switching in 8th Wall WebAR projects?

Thank you very much for your guidance. I really appreciate any advice you can provide!

2
  1. It depends on your component. In general I would advise using a Event Dispatcher design pattern. Where you emit events on one component and any other component that needs to listen for that event can and respond appropriate.
  2. Similar to above it’s up to your component and how it works. If the component is self contained and doesn’t make any modifications outside of itself then simply removing and re-adding the component should be enough.
  3. The best bet here is to create a global Manager object in your project to hold the State of the entire Application. There’s a few different ways to do this, especially when you consider using something like React with A-Frame.
  4. I’m not sure what you mean by “Clean component switching”. A component that’s turned on and off?
3

Dear Butler,

Thank you for your prompt and helpful response!

Currently, I’m using the second method you mentioned: each component is self-contained and doesn’t modify anything outside of itself. So I simply use setAttribute and removeAttribute to toggle components dynamically, and the system works well. Below is a screen recording of my current implementation:

I still have a few follow-up questions:

  1. Event Dispatcher Design Pattern:
    Could you please explain more about the fundamentals and pipeline of using the Event Dispatcher pattern in A-Frame? Does 8th Wall provide any sample projects or best practices that demonstrate this design?

  2. Global Manager Object:
    I’d love to learn more about how to implement a global manager. Am I understanding correctly that this could be a central JS object (or perhaps a main app.js file) that tracks and coordinates the state across different components?

  3. Clean Component Switching:
    What I meant by “clean component switching” is exactly what I’m currently doing — using setAttribute and removeAttribute to dynamically attach/detach A-Frame components based on the active gameplay mode.

Thank you again for your support! I’m really enjoying using 8th Wall as a development tool.

4

Check out this page on the A-Frame docs, I think it will really help!

As for the global state management you could just create your own JS file with an object and some setters and getters that emit events when called. Or if you’re using React you could use something like Redux.

1 Like
5

Dear Bulter,

Thanks for your help, I will checl this document.