Tresjs
UseTexture as component
Description
As a developer, what if we provide a function similar to vuesuse
In which we can use a composable as a component too. This could be maybe handy for others composable.
Suggested solution
EJ...
<Suspense>
<UseTexture :map="MYMAPTEXTURE" v-slot="{ map }" />
<TresMeshStandardMaterial :map="map"
<UseTexture />
</Suspense>
Alternative
Could be similar to: https://github.com/vueuse/vueuse/blob/main/packages/core/useMouse/component.ts
Any other alternative is considered
Additional context
What do you think?
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.
I think the following is possible with R3F, but not with Tres, atm:
<script setup lang="ts">
const texture = {... load my texture}
</script>
<template>
<TresMeshStandardMaterial>
<primitive :object="texture" attach="map" />
</TresMeshStandardMaterial>
</template>
Would that cover the use case here?
With the component approach, we don't have to create two components, we can get rid of one layer. Ej
//theExperiences.vue
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
</script>
<template>
<TresCanvas >
...
<Suspense>
<MyComponent />
</Suspense >
...
</TresCanvas >
</template>
// MyComponent
<script setup lang="ts">
const texture = {... load my texture}
</script>
<template>
<TresMesh>
<TresBoxGeometry />
<TresStandardMaterial :map="map" />
<TresMesh>
</template>
Obviusly there're many ways to not do this, but we can, abstract one step by just
<TresCanvas >
<Suspense>
<UseTexture :map="MYMAPTEXTURE" v-slot="{ map }" />
<TresMeshStandardMaterial :map="map"
<UseTexture />
</Suspense>
</TresCanvas >
Is just one way to improve DX to our Users