# Gameplay mode switch problem within a project

**URL:** <https://forum.8thwall.com/t/gameplay-mode-switch-problem-within-a-project/7905>\
**Category:** Technical Support\
**Tags:** general\
**Created:** [August 3, 2025, 5:59am UTC](https://forum.8thwall.com/t/gameplay-mode-switch-problem-within-a-project/7905 "2025-08-03T05:59:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![chow\_kenny](https://avatars.discourse-cdn.com/v4/letter/c/ed8c4c/32.png) [@chow\_kenny](https://forum.8thwall.com/u/chow_kenny)\
**Post date:** [August 3, 2025, 5:59am UTC](https://forum.8thwall.com/t/gameplay-mode-switch-problem-within-a-project/7905/1 "2025-08-03T05:59:12Z")

</div>

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:** [http://8th.io/m64ut](http://8th.io/m64ut)

### 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](http://8th.io/3pcg6)

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!

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [August 4, 2025, 3:34pm UTC](https://forum.8thwall.com/t/gameplay-mode-switch-problem-within-a-project/7905/2 "2025-08-04T15:34:41Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![chow\_kenny](https://avatars.discourse-cdn.com/v4/letter/c/ed8c4c/32.png) [@chow\_kenny](https://forum.8thwall.com/u/chow_kenny)\
**Post date:** [August 5, 2025, 1:39am UTC](https://forum.8thwall.com/t/gameplay-mode-switch-problem-within-a-project/7905/3 "2025-08-05T01:39:42Z")

</div>

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:

> **[Dynamic Change.mp4](https://drive.google.com/file/d/1GBFMEOIBFMN2Cmcu2Ip6RyKqxkk83iVl/view?usp=drive_link)**
>
> Google Drive file.

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.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [August 5, 2025, 4:04pm UTC](https://forum.8thwall.com/t/gameplay-mode-switch-problem-within-a-project/7905/4 "2025-08-05T16:04:05Z")

</div>

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

> **[A-Frame – Make WebVR](https://aframe.io/docs/1.7.0/introduction/javascript-events-dom-apis.html)**
>
> A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms.

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.

---

<div class="post-metadata">

**Author:** ![chow\_kenny](https://avatars.discourse-cdn.com/v4/letter/c/ed8c4c/32.png) [@chow\_kenny](https://forum.8thwall.com/u/chow_kenny)\
**Post date:** [August 6, 2025, 1:08am UTC](https://forum.8thwall.com/t/gameplay-mode-switch-problem-within-a-project/7905/5 "2025-08-06T01:08:51Z")

</div>

Dear Bulter,

Thanks for your help, I will checl this document.