Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UseTexture as component #680

Closed
4 tasks done
JaimeTorrealba opened this issue May 11, 2024 · 3 comments · Fixed by #757
Closed
4 tasks done

UseTexture as component #680

JaimeTorrealba opened this issue May 11, 2024 · 3 comments · Fixed by #757
Assignees
Labels
feature help wanted Extra attention is needed p2-nice-to-have Not breaking anything but nice to have (priority) PR welcome

Comments

@JaimeTorrealba
Copy link
Member

JaimeTorrealba commented May 11, 2024

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

@andretchen0
Copy link
Contributor

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?

@JaimeTorrealba
Copy link
Member Author

JaimeTorrealba commented May 11, 2024

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

@andretchen0
Copy link
Contributor

Ok, I see.

@alvarosabu alvarosabu added help wanted Extra attention is needed feature PR welcome p2-nice-to-have Not breaking anything but nice to have (priority) labels Jun 15, 2024
@alvarosabu alvarosabu moved this to In Progress in Team Board Aug 21, 2024
@github-project-automation github-project-automation bot moved this from In Progress to Done in Team Board Sep 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature help wanted Extra attention is needed p2-nice-to-have Not breaking anything but nice to have (priority) PR welcome
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants