How do I pass Enable3D the canvas I want it to use?

[Penumbra69]

I don't want to use a dom element added to the end of my page, I want to give the renderer the object to use.
Using vanilla THREE I was able to easily reference my <div><canvas id='canvas'></div> and pass it into the renderer.

When I try the same with Enable3D (probably incorrectly) I'm doing this:

const canvas: HTMLCanvasElement = document.querySelector('#canvas') as HTMLCanvasElement
      // set your project configs
      const scene = new Enable3DScene(); // My Scene3D instance with warpSpeed() on create()
      const config = { scenes: [Enable3DScene], canvas: canvas }

This isn't going to work, since Scene3DConfig only accepts:

Scene3DConfig extends Omit<ThreeGraphicsConfig, 'camera' | 'usePhysics' | 'enableXR'> {
    parent?: string;
    scenes: (typeof Scene3D)[];
}

So I don't see how I can tell Enable3D which canvas to choose..
Where's the magic?!

Thanks,
P

[Penumbra69]

I had to clone the repo and dig deeper into how Scene / Project interact, and I was able to determine that I didn't need a <canvas> object as much as I needed to tell the Project who my daddy was (parent: ).

For posterity .. After a bunch of trial and error, in an application where you want to specifically position your 3D window inside of a web page, you just need to have a parent in the DOM to align it to:

index.html:
<div id="game"></div>

Then when you are about to realize the physics engine, pass in the parent as a configuration:

      const config = { scenes: [Enable3DScene], parent: "game" }
      PhysicsLoader('/lib', () => new Project(config))

Thanks!
P