Enable usage of <Teleport>

[thomasaull]

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

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

[Astanusic]

Hello, I've been trying to implement a solution similar to what's offered by https://github.com/pmndrs/tunnel-rat.

Their implementation elegantly uses a Zustand store to manage an array of React nodes. The key aspect is how it employs state changes to control the rendering process. The 'In' component adds child components to the store's array, and its mounting triggers a store version increment. This version change, managed by Zustand, is crucial as it prompts all consuming components to re-render, ensuring the updated rendering order aligns with user expectations. The 'Out' component then renders these children from the store, reflecting the latest state. In essence, this approach cleverly uses state changes to manage and synchronize the rendering of components across different parts of the React tree.

I wonder if it's possible to implement something just like it. My guess is that it can't be that simple in our case because of the custom renderer. I wonder if there is a way to define in which renderer you want to render ?

Let me know if you got some ideas, I'll be happy to help with that.