Tresjs/tres

Components with textures shouldn't require `<Suspense>`

開放

#1,110 建立於 2023年10月22日

 (6 則留言) (0 個反應) (1 位負責人)Vue (188 個分叉)github user discovery
cientosgood first issuehelp wantedp3-significant

倉庫指標

星標
 (3,582 顆星)
PR 合併指標
 (PR 指標待抓取)

描述

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 (or refs) whose initial value is a 1-pixel transparent DataTexture
  • updates the ref once 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

貢獻者指南