Decouple scene from canvas

[mablay]

Description

Hey there,
Tres looks amazing. Great work!

I'd love to switch to Tres, but my application uses multiple canvas elements, each rendering a different camera perspectives to the same scene. Of what I read in the docs & source code, TresCanvas creates its own scene and doesn't share it with other TresCanvas instances. I'd love to see TresCanvas taking scene as an optional prop, but I can also imagine that there might be a lot of side effects coming with such a change.

What do you think of it? Edge case that's hard to implement or easy and viable for the ecosystem?

Have a great day!
Marc

Suggested solution

/src/components/TresCanvas.vue

const props = withDefaults(defineProps<TresCanvasProps>(), {
  ...,
  scene: new Scene() // TresScene | Scene
})

I already know, I'm missing out on component lifecycle handling. I just wanted to point in the direction this is going.

Alternative

No response

Additional context

I think this is somehow the reverse request to Portal

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[andretchen0]

Hi @mablay

Thanks for having a look and for providing feedback!

What do you think of it? Edge case that's hard to implement or easy and viable for the ecosystem?

As far as I've seen, this is probably something of an edge case, but I think we are working on features that could make it easier. For example, we're currently working on Portals, which require multiple contexts, each with its own scene. Once that's implemented, I think it's just one additional step to set up something like THREE's "scissors" to render multiple scenes in a canvas.

https://threejs.org/manual/#en/multiple-scenes

Fwiw, you can already render multiple scenes using the process described above, but you have to "roll your own". Tres lets you override its default render function with useLoop().render(...). In particular THREE's renderer doesn't require a scene, so you could send it a series of Tres-managed Object3Ds that stand in for your scenes.

But at the moment, Tres doesn't offer a lot of help for this use case. For example, if you use scissors to render multiple Object3Ds as scenes, you'll also have to roll your own events because the event system works with the single actual Scene.