Enable usage of <Teleport>

Description

Sometimes I want to contain some shared logic for HTML User-Interface and 3d Content in the same component, for example the user clicks a <button> and something in the 3d scene acts accordingly. With the help of portal-vue or Teleport I have used this approach in the past, but with a custom made implementation of BabylonJS without using a custom renderer.

Example:

<template>
  <GLTFModel path="my-model.glb" v-if="isVisible" />
  
  <Teleport to="body">
    <button @click="isVisible.value = false">Hide GLTF</button>
  </Teleport>
</template>

Suggested solution

Enable usage of portal-vue and/or Teleport. I have tried both, but they both throw different kinds of error:

• portal-vue: "[portal-vue]: Necessary Injection not found. Make sur you installed the plugin properly."
• Teleport: "Failed to locate Teleport target with selector "body" […]"

I suspect both errors are caused by the usage of a custom-renderer thus portal-vue/Teleport simply can't access their targets. It's a wild guess, but when moving everything outside of the <TresCanvas> context it works just fine.

Alternative

No response

Additional context

I guess https://github.com/Tresjs/tres/issues/312 is somewhat of a similar topic

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.