Having trouble with react three fiber: THREE.WebGLRenderer: Context Lost - three.js

Question

I have some kind of problem where my dice are giving the error
THREE.WebGLRenderer: Context Lost.
I am not sure but I think it has something to do with switching from use-cannon to #react-three/cannon. When I try to render D4, I get the error. The box however seems to work just fine which is why I am a bit lost on what exactly I should try next to solve this problem.
import * as THREE from 'three'
import ReactDOM from 'react-dom'
import React, { Suspense, useMemo, useState, useEffect } from 'react'
import { Canvas, useFrame, useLoader } from '#react-three/fiber'
import { Physics, useBox, usePlane, useSphere, useConvexPolyhedron } from '#react-three/cannon'
import niceColors from 'nice-color-palettes'
import './styles.css'
// import { useConvexPolyhedron } from '#react-three/cannon';
import { Tetrahedron, RoundedBox } from '#react-three/drei';
import { TestDice } from './TestDice.js'
const DiceOverview = (props) => {
// console.log('trigger check');
// console.log(dice, 'something odd');
//radius and the rest are all passed in so likely radius adjusts these values.
function Plane({ color, ...props }) {
const [ref, api] = usePlane(() => ({ ...props }))
return (
<mesh ref={ref} receiveShadow >
<planeBufferGeometry onClick={() => api.applyImpulse([0, 20, 0], [0, 0, 0])} attach="geometry" args={[1000, 1000]} />
<meshPhongMaterial attach="material" color={color} />
</mesh>
)
}
function Box() {
const [ref, api] = useBox(() => ({ mass: 1, args: [4, 4, 4], isKinematic: true }))
useFrame(state => {
const t = state.clock.getElapsedTime()
})
return (
<mesh ref={ref} castShadow receiveShadow>
<boxBufferGeometry attach="geometry" args={[4, 4, 4]} />
<meshLambertMaterial attach="material" color={'#3F00FF'} side={THREE.DoubleSide} />
</mesh>
)
}
const D4 = (props) => {
console.log(props, 'what is D4 getting?')
console.log(Tetrahedron, 'this is tetrahedron');
console.log('hello');
const radius = 1;
const tetrahedronGeometry = new THREE.TetrahedronGeometry(radius);
const [ref, api] = useConvexPolyhedron(() => {
return {
args: tetrahedronGeometry,
mass: 1,
...props,
};
});
console.log(ref, api, 'are these triggering');
return (
<Tetrahedron
args={radius}
ref={ref}
onClick={() => api.applyImpulse([0, 20, 40], [0, 0, 0])}
castShadow
receiveShadow
>
<meshNormalMaterial attach="material" />
</Tetrahedron>
);
};
const Dtest = (props) => {
return (
<RoundedBox
args={[1, 1, 1]} // Width, Height and Depth of the box
radius={0.05} // Border-Radius of the box
smoothness={4} // Optional, number of subdivisions
position={[0, 0, 10]}
>
<meshPhongMaterial attach="material" color="#f3f3f3" wireframe />
</RoundedBox>
);
};
const glProps = { alpha: false };
const cameraProps = { position: [0, -12, 16] };
// let keys = Object.keys(props)
// console.log('what is this color', niceColors[10][4])
return (
<>
<button onClick={() => { console.log('click') }}>button</button>
<button>toss</button>
<TestDice />
<div style={{ position: "relative", width: 500, height: 500 }}>
<Canvas id="myCanvas" concurrent shadowMap sRGB gl={glProps} camera={cameraProps} width={100}>
<hemisphereLight intensity={0.35} />
<spotLight position={[30, 0, 30]} angle={0.3} penumbra={1} intensity={2} castShadow shadow-mapSize-width={256} shadow-mapSize-height={256} />
<pointLight position={[-30, 0, -30]} intensity={0.5} />
<Physics className='physics' gravity={[0, 0, -60]}>
<Plane color={niceColors[10][4]} />
<Plane color={niceColors[10][1]} position={[-6, 0, 0]} rotation={[0, 0.9, 0]} />
<Plane color={niceColors[10][2]} position={[6, 0, 0]} rotation={[0, -0.9, 0]} />
<Plane color={niceColors[10][3]} position={[0, 6, 0]} rotation={[0.9, 0, 0]} />
<Plane color={niceColors[10][0]} position={[0, -6, 0]} rotation={[-0.9, 0, 0]} />
<D4 position={[-4, 0, 2]} rotation={[0, 1, 0]} />
<Dtest />
{/* {promise} */}
<Box />
</Physics>
</Canvas>
</div>
</>
);
};
export default DiceOverview;
This is my package.JSON file:
{
"name": "basictemplate",
"version": "1.0.0",
"description": "template to use in future projects",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode development --watch"
},
"repository": {
"type": "git",
"url": "git+https://github.com/jessemchung/template.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/jessemchung/template/issues"
},
"homepage": "https://github.com/jessemchung/template#readme",
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"style-loader": "^3.2.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {
"#react-three/cannon": "^3.0.1",
"#react-three/drei": "^7.5.0",
"#react-three/fiber": "^7.0.6",
"nice-color-palettes": "^3.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"three": "^0.132.2"
}
}
After more testing I believe the useConvexPolyhedron is what is causing trouble for me. Specifically, I think the problem is related to the args value. Perhaps something changed in the updated version in some way as this worked with use-cannon (which is now deprecated).
Long story short everyone, I messsaged the people responsible for the github and they gave a good explanation.
https://github.com/pmndrs/use-cannon/issues/274
Basically, this was deprecated and they do it differently now

Answer 1

Add restore Context function
restoreContext() {
const canvas = renderer.domElement;
canvas.addEventListener(
'webglcontextlost',
function (event) {
event.preventDefault();
setTimeout(function () {
renderer.forceContextRestore();
}, 1);
},
false
);
}