'getThreeObjectBySelector' only works on light DOM

[alangdm]

Hi, I was trying to use three-elements inside a LitElement-based web component with Shadow DOM enabled and ended up finding that the current way of referencing other three objects by a selector isn't compatible with Shadow DOM

From what I could see in the v0.4 code, this util is only used when fetching the camera in a scene and when applying a prop using the ref directive.

I was thinking of possible solutions, one I came up with is trying to run the querySelector from the three-game ancestor, and maybe asking users to disable shadow DOM for web components meant to be used as descendants of a three-game.

But there might be a better solution.

As for workarounds, at least for setting a custom camera you can run the following code in your connectedCallback (or firstUpdated in Lit's case):

const scene = this.shadowRoot.querySelector('three-scene');
const camera = this.shadowRoot.querySelector('three-camera');
scene.camera = camera.object;

[hmans]

Thanks for raising this. I'll take a look when I get the chance.