Three.js не отображается должным образом на мобильных устройствах в приложении React Vite ⇐ Android

[Anonymous]

Я работаю над приложением React, использующим Vite и Three.js для рендеринга 3D-элементов. Все отлично работает в настольных браузерах и IOS, но когда я открываю приложение на мобильном устройстве Android, 3D-элементы ломаются и отображаются неправильно. Модели либо выглядят искаженными, либо некоторые части полностью отсутствуют.
введите здесь описание изображения. Ожидается работа.
введите здесь описание изображения, вот как оно похоже.
Не работает в мобильных браузерах CHROMIUM. Проект работает на IOS, всех настольных и портативных устройствах, Firefox (мобильный).
Что я пробовал:

• Я проверил, связана ли проблема с разрешением экрана, но изменение размера или ориентации экрана не решает проблему, она работает только на ноутбуке.
  
  Пытался отладить с помощью инструментов разработчика мобильного браузера, но в журналах консоли не нашел ничего необычного (ошибок не выдается), но есть что-то вроде ="Функция отключена" . Эта строка в настоящее время появляется в каждом моем проекте, и я понятия не имею об этом. Согласно моим исследованиям, это связано с тем, что какая-либо конкретная функция или функция в настоящее время недоступна или отключена, и я пытаюсь получить к ней доступ. я не знаю об этом/
• Обновил Three.js до последней версии и убедился, что все зависимости совместимы с React Vite.< /p>
• Проверено, что я использую размер холста, удобный для мобильных устройств, и правильно обрабатываю изменение размера окна в настройке Three.js.// Imports
  import { Suspense, useEffect, useState } from "react";
  import { Canvas } from "@react-three/fiber";
  import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
  import CanvasLoader from "../Loader";

// Computers Component
const Computers = ({ isMobile }) => {
const computer = useGLTF("./desktop_pc/scene.gltf");
return (






);
};

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

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

setIsMobile(mediaQuery.matches);

const handleMediaQueryChange = (event) => {
setIsMobile(event.matches);
};

mediaQuery.addEventListener("change", handleMediaQueryChange);

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

//Rendering the Canvas
return (








);
};
export default ComputersCanvas;


Подробнее здесь: https://stackoverflow.com/questions/791 ... pplication