ES6 Class Problem when using EventListeners


I’m trying to implement an ES6 way of development following the ES6 page (ES6 - Babylon.js Documentation). It’s good for code splitting and organizing things as web components. I’m doing fine with this part.

My goal is to have a (DOM) button that hides an imported gltf node (called “C1”). My current problem is that:

  1. I either don’t know how to access any gltf node (“C1”) from outside of the Game Class.
  2. or I don’t know how to access the DOM from inside the importing gltf method.

I would prefer solution 1 because I cant apply this solution more broadly. However, any of them will hep me a lot because I am at a dead end (with my current knowledge of programming).

I have done my best to reproduce my code in the Playground… but the results is not perfect. You can see my logic though. If you have any other idea, tell me.

Thank you for reading this.

Hi Spike.
You have few options, one ot them is to create a new method in your class which to update your scene, something like BUTON.onclick = Game.updateScene(); Only make sure that when you call this method on the assets in your scene are already loaded. Cheers! :beers:

Hi Spike,

Maybe you can try adding the node to an Asset Container? Then in your onClick function you can call container.removeAllFromScene() to hide the node from the scene.

Sounds obvious now that you’ve said it… but I was stuck! I’ll make the button available only after the assets are loaded using a promise-then logic.

Thank you Marian!

Hi Belfortk!

Great idea! I just looked at it while I am not going to use it this time, that’s certainly something I’ll be using. The way I understand “containers” is like layers in AutoCAD or Collections in Blender and that’s really worth learning!

Thank you!

1 Like