THREE.WebGLRenderer: Context Lost (Uncaught TypeError: unhideTextInstance is not a function)

Question

我正在使用 Suspense:

在 react-three-fiber 中渲染带纹理的对象

<Suspense fallback={null}>
    <Image image={ images(`./texture.png`).default } /> // render plane with texture.png
    <Image image={ images(`./texture.png`).default } /> // render plane with texture.png
    <Image image={ images(`./texture.png`).default } /> // render plane with texture.png
</Suspense>

其中 Image 是自定义组件，它使用 useLoader 加载图像并渲染以图像作为纹理的平面。

通常不会出现问题。但偶尔，由于 Suspense 中的某些图像组合，canvas 无法呈现，我收到 THREE.WebGLRenderer: Context Lost 并出现以下错误：

Uncaught TypeError: unhideTextInstance is not a function

我尝试使用 gl.forceContextRestore() 处理 WebGL 上下文丢失，但是当 WebGL 上下文恢复时，canvas 仍然无法呈现。

Answer 1

在这种情况下，TypeError 被抛出是因为 Suspense 中包含注释。去掉评论，问题解决：

<Suspense fallback={null}>
    <Image image={ images(`./texture.png`).default } />
    <Image image={ images(`./texture.png`).default } />
    <Image image={ images(`./texture.png`).default } />
</Suspense>

THREE.WebGLRenderer: Context Lost (Uncaught TypeError: unhideTextInstance is not a function)

THREE.WebGLRenderer: Context Lost (Uncaught TypeError: unhideTextInstance is not a function)

three.js

reactjs

react-three-fiber