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

【问题标题】：THREE.WebGLRenderer: Context Lost (Uncaught TypeError: unhideTextInstance is not a function)THREE.WebGLRenderer: Context Lost (Uncaught TypeError: unhideTextInstance is not a function)
【发布时间】：2022-01-31 11:43:36
【问题描述】：

我正在使用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 内的一些图像组合，画布无法渲染，我收到 THREE.WebGLRenderer: Context Lost 并出现以下错误：

Uncaught TypeError: unhideTextInstance is not a function

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

【问题讨论】：

标签： reactjs three.js react-three-fiber

【解决方案1】：

在这种情况下，TypeError 被抛出，因为 Suspense 中包含 cmets。去掉cmets，问题就解决了：

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

【讨论】：