hmans / three-elements

Web Components-powered custom HTML elements for building Three.js-powered games and interactive experiences. 🎉
https://three-elements.hmans.co
MIT License
398 stars 14 forks source link

[core] Similar to `tick` `late-tick` etc., also offer `mount` and `unmount` (or similar) #48

Open hmans opened 3 years ago

hmans commented 3 years ago

We currently have a convenient way of running code in every frame, but if we want to run code when an element appears (or disappears), we currently have to drop into the imperative layer or, worse, build our own class extending ThreeElement and overloading mountedCallback and friends.

It would be nice if we could add code that is run when the element appears (and disappears) by setting a property or attribute, just like we can do with ticker events.

These new attributes could be named something like mount and unmount, or appear and disappear, or something similar.

There's an opportunity here to make them real DOM events, but I think that would be a mistake; if there's a large number of objects appearing or disappearing, it would have a significant impact on performance (and memory/GC). So, just like the ticker callbacks, these need to run through an EventEmitter, which means we'll have to add one of those guys to BaseElement.

Checklist:

CodyJasonBennett commented 3 years ago

Not sure exactly what mount implies but appear can be misleading if objects do not leave view.

hmans commented 3 years ago

I'm currently using the term "mount" to describe the point at which a ThreeElement is not only connected (in the web components sense), but has also initialized everything its Three.js-specific stuff, which typically happens within a microtask enqueued to be executed after all the elements are finished connecting, so also calling this event "mount" or "mounted" would allow us to continue using that terminology. (Same thing for "remove", which I specifically did not call "unmount" on purpose, because at the point that it is run, the element itself has already been disconnected.)