fix(useRenderLoop): allow separate instances POC

[andretchen0]

Problem

useRenderLoop currently spawns only a single loop used by all instances of <TresCanvas />. Among other things, this means an individual canvas can't be paused without pausing all canvases:

• Multiple instances of useRenderLoop per page share state #252

Solution

For a component subtree, provide/inject a unique loop.

Context

As discussed on the Discord, this is a POC preserving the current useRenderLoop interface, but with separate instances of the render loop per <TresCanvas />. As with the current code, the POC works in <script setup> above a <template><TresCanvas /></template>.

Current shortcomings

1. A TresCanvas currently needs to be alone in the provider subtree; e.g., two canvases in the same file will use the same provider. So http://localhost:5173/basic/multiple was split into three files.
2. Directives – afaik – don't "live in" the component tree and don't get provide/inject. So http://localhost:5173/basic/lights doesn't work out of the box.

I have a transparent-to-the-user solution in mind for 1. There could be a transparent or explicit workaround for 2, but I'd like to discuss these with the team on the Discord.

Taking over the render loop isn't implemented; I'd like to diverge from R3F's API here. I'll bring it up on the Discord.

Playground

• pnpm run playground
• Visit http://localhost:5173/basic/multiple
• Individual canvases can now be paused, something that the current implementation doesn't handle.

Since this modifies useRenderLoop all the playground demos are using it. Except for directives, they all work, at least at first glance.