r3f .connect method

[abernier]

Introducing a .connect method to allow binding events and side-effects independently from the instanciation:

const cameraControls = new CameraControls(camera)

cameraControls.connect(renderer.domElement)
cameraControls.dispose()
cameraControls.connect(renderer.domElement)
cameraControls.dispose()

Backward compatible:

const cameraControls = new CameraControls(camera, renderer.domElement) // auto-`connect`ed

This is useful in order <CameraControls> drei component to work properly with r3f.

See: #262 (comment)

[abernier]

Git displays a big diff, but since the class was already really well organised, I basically just have made the _domElement optional:

and moved those lines out of the if ( domElement ) {} block:

and created this new this._addAllEventListeners method:

Finally I added a public .connect method near the dispose one:

[abernier]

I also made a dedicated examples/r3f.html test with 2 buttons: connect and dispose and stress-tested them without any issue.

I also checked it does not break other examples (only tested 3 or 4 not all, but seemed ok)

[yomotsu]

Thanks for your PR with detailed information as well as testing with examples.
I totally understand what you changed.
Merging the PR, and let me change it a little bit after that.

[abernier]

Thank you very much 🙏🏻

I will PR an update of drei's CameraControls component when you release the next version of camera-controls, that takes advantage on that new .connect method ;)

[yomotsu]

@abernier
Thank you too!
Okay, I will let you know when it's ready.

[yomotsu]

@abernier
v1.38.0 has been released and published on npm

I changed some with #339 and added disconnect(). dispose() is now kind of a wrapper of disconnect().
(If you are interested, please check the PR for more change details)

• disconnect() is literally disconnect from the domElement.
• dispose() is for dispose or destroy, that includes disconnect() internally.

[abernier]

Excellent!

I'm created a drei's PR to take those changes into account: pmndrs/drei#1238