I have problems when switching routes from other page. It just shows this error.
THREE.WebGLRenderer: Context Lost.
All other pages wroks fine, but when I'm switching to rendering model page, it shows errow and does not render anything. Models loaded successfully in plain react App.js. But it doesn't work when I migrate to current project which has routes.
Code sample below. For App.js
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Homepage, Aboutuspage, WhatwedoPage, DemoPage } from "./pages";
import "./App.css";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route index path="/" element={<Homepage />} />
<Route path="/aboutus" element={<Aboutuspage />} />
<Route path="/whatwedo" element={<WhatwedoPage />} />
<Route path="/demo" element={<DemoPage />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;For DemoPage.jsx
import React, { useEffect, useRef} from "react";
import { Canvas} from "@react-three/fiber";
import { Environment, OrbitControls } from "@react-three/drei";
import { Suspense } from "react";
import { Demo } from "../../components";
const DemoPage = () => {
const threeRef = useRef();
useEffect(() => {
console.log(threeRef);
}, []);
return (
<Canvas ref={threeRef} camera={{ position: [0, 0, 50] }}>
<ambientLight args={[0xff0000]} intensity={0.1} />
<directionalLight color="blue" position={[0, 0, 5]} intensity={0.5} />
<Suspense fallback={null}>
<Demo />
<OrbitControls />
<Environment preset="sunset" background />
</Suspense>
</Canvas>
);
};
export default DemoPage;For Demo.jsx
import React from "react";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { useLoader } from "@react-three/fiber";
import { TextureLoader } from "three/src/loaders/TextureLoader";
import * as THREE from "three";
const Demo = () => {
const material = new THREE.MeshBasicMaterial({ color: "rgb(230, 160, 127)", wireframe: false });
const obj = useLoader(OBJLoader, "../../assets/models/head.obj");
console.log(obj);
return <primitive object={obj} scale={0.8} dispose={null} />;
};
export default Demo;