这个问题已经在我的三星Galaxy A32上重现。

解决方案

问题出在Hero.tsx;将alpha: true添加到webGL配置中。

// Hero.tsx
<Canvas
  frameloop="demand"
  shadows
  camera={{ position: [20, 3, 5], fov: 25 }}
  // add alpha: true here.
  gl={{ preserveDrawingBuffer: true, alpha: true }}
>
{/* ... */}
</Canvas>

说明

原因目前还不是很清楚。我只能猜测，因为控制台消息显示r3f示例没有被正确销毁。消息是从chrome://inspect获取的。

WARNING: Too many active WebGL contexts. Oldest context will be lost., THREE.WebGLRenderer: Context Lost.
这些消息意味着每次挂载3D画布时，都会创建另一个不必要的webGL示例。多画布的正确实现应该只包含一个webGL示例，并在画布manually之间共享或使用门户。
我假设webGL缓冲区以某种方式被损坏，因此通过更改配置强制后台透明。
该错误在桌面浏览器中不可重现;这可能需要进一步深入调查。

我试着调试你的代码。有些东西阻止在Android的Chrome浏览器中渲染您的Canvas组件。我试图解决它，它似乎起作用了。你能尝试用下面的代码更新Computers.txs文件吗？
其余代码应该相同。

const ComputersCanvas = () => {
    const [isMobile, setIsMobile] = useState(false);

    useEffect(() => {
        const mediaQuery = window.matchMedia("(max-width: 500px)");

        setIsMobile(mediaQuery.matches);

        const onMediaQueryChange = (event: MediaQueryListEvent) => {
            setIsMobile(event.matches);
        };

        mediaQuery.addEventListener("change", onMediaQueryChange);

        return () => {
            mediaQuery.removeEventListener("change", onMediaQueryChange);
        };
    }, []);

    const [initialized, setInitialized] = useState(false)

    useEffect(() => {
        if (!initialized) {
            setInitialized(true);
        }
    }, [initialized]);

    if (!initialized) {
        return <div></div>
    }

    return (
        <Canvas
            frameloop="demand"
            shadows
            camera={{position: [20, 3, 5], fov: 25}}
            gl={{preserveDrawingBuffer: true, alpha: true}}
        >
            <Suspense fallback={<Loader/>}>
                <OrbitControls
                    enableZoom={false}
                    maxPolarAngle={Math.PI / 2}
                    minPolarAngle={Math.PI / 2}
                />
                <Computers isMobile={isMobile}/>
            </Suspense>
            <Preload all/>
        </Canvas>
    );
};

这是可行的，因为最初我们是在渲染div元素。
在第一次渲染之后，我们强制它使用Canvas元素重新渲染。
希望这能解决你的问题。
Thanks：）

更新：

很抱歉，我无法解决您的问题，因为它需要尝试不同的方法。但是，我可以给予你一些建议和想法，可以简化你的过程。主要问题在于android/移动的浏览器上的canvas行为。浏览器限制画布上下文的数量。我看到它一般是八，但它们可以是任何数字。
您可能已经注意到控制台消息THREE.WebGLRenderer: Context Lost.

• 你可以使用一个画布上下文并重复使用同一个。这可能会很麻烦，特别是对于你的应用。
• 您可以在应用中尝试解决方法，即应用监听滚动并仅为活动/可见的视图创建画布。在当前状态下，您的应用正在为页面上的所有视图/组件创建画布。
• 当然，你可以尝试谷歌搜索和搜索，其他人是如何克服类似的情况。
• 你可以增加这个问题的奖金，以吸引注意力，等待好的解决方案。
• 等等的。