Tresjs/tres
Components with textures shouldn't require `<Suspense>`
Aberta
#1.110 aberto em 22 de out. de 2023
cientosgood first issuehelp wantedp3-significant
Métricas do repositório
- Stars
- (3.582 estrelas)
- Métricas de merge de PR
- (Mesclagem média 5d 3h) (18 fundiu PRs em 30d)
Description
Description
As a dev using Cientos, I don't want to have to wrap components in <Suspense> just because they use a texture internally.
Suggested solution
I suggest we provide a function like useTexture, but one that:
- returns a
ref(orrefs) whose initial value is a 1-pixel transparent DataTexture - updates the
refonce the image is loaded
This will allow us to avoid awaiting in setup code.
Alternative
Alternatively, we could keep the current useTexture and provide a separate useEmptyTexture to be used like
const t:Ref<Texture> = useEmptyTexture()
useTexture({map:'example.org/texture.png'}).then((obj) => t.value = obj.map)
watch(t, () => { /* do something */ })
Additional context
I'm adding a texture prop to <Sparkles /> and I don't want to force users to wrap the component in a <Suspense />.
I looked for established patterns and found that <Smoke /> loads textures, but requires <Suspense />. I think we can improve the DX by removing that requirement for users and providing a standard-ish way for components to avoid awaiting.
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.