A-frame: html objects called from scene entities

Question

I’m trying to control some DOM elements from entities within A-Frame scene. This question has been asked before here: Control HTML Objects with A-Frame Entity. Noa wrote a component that allow an entity to “call” a DOM element and bring it in front of the scene. I added the "hide" function, in a rather clumsy way I think, and also the option of different elements of the scene calling different DOM elements through the same component. I dit not get it this one. Is it necessary to write different components for each of these actions? I remix Noa’s Glitch to show what I’m trying to do: https://glitch.com/edit/#!/join/391f2bd8-9f3a-4a3d-9426-e849d260081b

Thank you very much.

Needs additional elaboration. Glitch does not work. `script.js` file empty. More specificity in the question will help. Is something not working? Are you asking for stylistic advice on code? Best way to organize your DOM managment? — Diego Marcos, Dec 29 '18 at 03:13
Hello, thank you for yout answer. Sorry for the bad Glitch link. I didnt see the big share button under my project name. There it is: https://glitch.com/edit/#!/join/391f2bd8-9f3a-4a3d-9426-e849d260081b I ask for help to adapt Noa's component to be able to call different DOM's elements from different a-frame entities. I hope the question is clearer now. Thank you again! — Marcos Alfonzo, Dec 29 '18 at 09:00

score 1 · Accepted Answer · answered Dec 29 '18 at 17:25

I would do this with a different type of component that takes a selector for the HTML you want it to affect:

AFRAME.registerComponent("show-html", {
  schema: { type: "selector" },
  init: function () {
    const target = this.data;
    this.el.addEventListener("click", () => target.classList.add("show"));
  }
});

<a-image show-html="#el_1"></a-image>
<a-image show-html="#el_2"></a-image>

A-frame: html objects called from scene entities

1 Answers1