Vue Tunnel rat

[ThimoDEV]

Description

As a developer using TresJS I want to have the ability to Teleport my TresJS Canvas to multiple places in my DOM tree without having to use multiple Canvases.

I use the tunnel rat package that is made for React: https://github.com/pmndrs/tunnel-rat

I use the react three fiber nextjs starter template and they have a great example of how tunnel rat is used:
https://github.com/pmndrs/react-three-next

It helps me to easily use a canvas inside different html tags at all kinds of places in my project. By using tunnel-rat I only have to use one main Canvas which is reused for all the places where ThreeJS is used.

Suggested solution

Vue has the provide/Inject and Teleport functions, However I think they come short to get the full functionality of tunnel-rat.

https://github.com/pmndrs/tunnel-rat/blob/main/src/index.tsx
https://github.com/pmndrs/tunnel-rat/blob/main/src/utils.ts

I would suggest using pinia for keeping track of all the childs that went into the "In" component so they can be rendered properly in the "Out" component

Some sort of suggestion that gives an idea of the implementation:

`// store.js
import { defineStore } from 'pinia'

export const useStore = defineStore({
id: 'main',
state: () => ({
current: [],
version: 0,
}),
actions: {
incrementVersion() {
this.version++
},
addChild(child) {
this.current.push(child)
},
removeChild(child) {
this.current = this.current.filter((c) => c !== child)
},
},
})

// In.vue
<script setup> import { useStore } from './store' import { onMounted, watchEffect } from 'vue' const store = useStore() let child watchEffect(() => { child = slots.default ? slots.default() : [] store.addChild(child) }) onMounted(() => { store.incrementVersion() }) onBeforeUnmount(() => { store.removeChild(child) }) </script>

// Out.vue

<script setup> import { useStore } from './store' const store = useStore() </script>`

Alternative

No response

Additional context

No response

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.

[Neosoulink]

@alvarosabu is someone working on this feature? it looks cool

I'd love to contribute to this

[ThimoDEV]

@alvarosabu is someone working on this feature? it looks cool

I'd love to contribute to this

So far that I know of this feature is not started yet

[alvarosabu]

Hi @Neosoulink @ThimoDEV this potential feature is really down on our priorities, so I will assign a PR welcome tag if the community wants to contribute to it

[Neosoulink]

I took a few minutes to implement a tunnel_rat VueJS integration.

The Idea of inputting Tres code outside of the TresCanvas was exciting.
But I don't know if it's a good idea to integrate it on Tres, I mean it works for any VueJS codes 🤷‍♂️...

The following code:

<a href="https://vitejs.dev" target="_blank">
  <t_html.In v-if="toggleState">
     <!-- a tag -->
  </t_html.In>
</a>

<TresCanvas window-size>
  <TresPerspectiveCamera />

  <t_webgl.Out />

 <!-- Some Tres code -->
</TresCanvas>

<t_webgl.In v-if="toggleState">
  <TresMesh ref="torusRef">
    <TresTorusGeometry :args="[2, 0.3, 16, 32]" />
    <TresMeshBasicMaterial color="orange" />
  </TresMesh>
</t_webgl.In>

<t_html.Out />

Will give us:

Finally, as @alvarosabu said, this is a minor priority, so maybe this issue will not be much monitored but let me know about it.

See the full demo here: https://stackblitz.com/edit/vitejs-vite-zqau7f?file=src%2Fcore%2Ftunnel.ts,src%2FApp.vue...

[ThimoDEV]

I took a few minutes to implement a tunnel_rat VueJS integration.

The Idea of inputting Tres code outside of the TresCanvas was exciting. But I don't know if it's a good idea to integrate it on Tres, I mean it works for any VueJS codes 🤷‍♂️...

The following code:

<a href="https://vitejs.dev" target="_blank">
  <t_html.In v-if="toggleState">
     <!-- a tag -->
  </t_html.In>
</a>

<TresCanvas window-size>
  <TresPerspectiveCamera />

  <t_webgl.Out />

 <!-- Some Tres code -->
</TresCanvas>

<t_webgl.In v-if="toggleState">
  <TresMesh ref="torusRef">
    <TresTorusGeometry :args="[2, 0.3, 16, 32]" />
    <TresMeshBasicMaterial color="orange" />
  </TresMesh>
</t_webgl.In>

<t_html.Out />

Will give us:

Finally, as @alvarosabu said, this is a minor priority, so maybe this issue will not be much monitored but let me know about it.

See the full demo here: https://stackblitz.com/edit/vitejs-vite-zqau7f?file=src%2Fcore%2Ftunnel.ts,src%2FApp.vue...

This looks very cool!

In the React ecosystem tunnel rat is its own package, so it would make sense to make it also its own package here.

For react theres the poinmnders community for this kind of repos, if Tresjs is not the place for it maybe another vue-community github organisation might want it?

[alvarosabu]

Hi @ThimoDEV

For react theres the poinmnders community for this kind of repos, if Tresjs is not the place for it maybe another vue-community github organisation might want it?

We can support you by creating the package in the org if you want to work on it 😊