Продолжаю получать сообщение об ошибке «THREE.WebGLRenderer: потеря контекста» в моем проекте React Three Fiber. ⇐ Javascript

[Anonymous]

Я делаю школьный проект в масштабе разных планет и сейчас делаю MVP для приложения.
Я не получаю ошибок, когда удаляю компонент Slider, но когда он есть, он сообщает об ошибке. Это мой код для справки. Компонент слайдера от ShadCN, мне просто нужно знать, как исправить ошибку. Кажется, ничто не устарело, и мой компьютер прекрасно запускает примеры Three.js
function Sphere({ planet, position, speedMultiplier }: sphereProps) {
const [hovered, setHover] = useState(false);
// useLoader is safe and memoized, which helps performance
const textureMap = useLoader(THREE.TextureLoader, planet.texture);

let speed: number = 1; // Changed 'var' to 'let'
if (planet.speed != null) {
speed = 1.0 / planet.speed;
}

const mesh = useRef(null);

useFrame(() => {
// Ensure mesh.current exists before trying to access properties
if (mesh.current) {
mesh.current.rotation.y += speedMultiplier * speed;
}
});

const radius = planet.diameter / 2;

return (
{ setHover(true); }}
onPointerLeave={() => { setHover(false); }}
ref={mesh}
>



);
}

function ContextLossHandler() {
const { gl } = useThree();

useEffect(() => {
const canvas = gl.domElement;

const handleContextLost = (event: Event) => {
event.preventDefault();
console.warn('WebGL context lost. Attempting to restore...');
};

const handleContextRestored = () => {
console.log('WebGL context restored successfully.');
};

canvas.addEventListener('webglcontextlost', handleContextLost);
canvas.addEventListener('webglcontextrestored', handleContextRestored);

return () => {
canvas.removeEventListener('webglcontextlost', handleContextLost);
canvas.removeEventListener('webglcontextrestored', handleContextRestored);
};
}, [gl]);

return null;
}

export default function Compare() {
// Define planet objects (keeping them outside the render for consistency)
const EARTH_DIAMETER = 12.742;
const MOON_DIAMETER = 3.4748;

// Removed isContextLost state and related logic to fix the typing error (2322)
const [speedMultiplier, setSpeedMultiplier] = useState([0.00005])

const earthPlanet: Planet = useMemo(() => ({ texture: earth_texture, diameter: EARTH_DIAMETER, speed: 1 }), [EARTH_DIAMETER]);
const comparisonPlanet: Planet = useMemo(() => ({ texture: earth_texture, diameter: 0.25 }), []);
const moon: Planet = useMemo(() => ({ texture: moon_texture, diameter: MOON_DIAMETER, speed: 29.5 }), [MOON_DIAMETER]);
const speed = speedMultiplier[0];

return (


Compare the sizes of planets













);
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... ee-fiber-p