Having trouble using drei materials and other features like MeshWobbleMaterial, MeshDistortMaterial, or ContactShadows? You may encounter errors such as:
react-three-fiber.esm.js:1383 Uncaught TypeError: Cannot read property 'getState' of null at useFrame (react-three-fiber.esm.js:1383) at MeshDistortMaterial.js:72 (in the case of MeshDistortMaterial)
The 'null' it references is a result of 'useContext(context)' within the useFrame module in react-three-fiber. It seems related to my use of next.js, version 10.1.3.
Below is the relevant code snippet:
import { useRef, useState, useMemo } from 'react'
import { Canvas } from 'react-three-fiber'
import { Box, MeshDistortMaterial } from '@react-three/drei'
import * as THREE from 'three'
import MyCamera from '../three/MyCamera'
//MATERIAL USAGE BLOCK
const MyBox = function (props) {
const mesh = useRef()
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
return (
<Box
args={[1, 1, 1]}
{...props}
ref={mesh}
scale={active ? [6, 6, 6] : [5, 5, 5]}
onClick={() => setActive(!active)}
onPointerOver={() => setHover(true)}
onPointerOut={() => setHover(false)}
castShadow
>
<MeshDistortMaterial
attach="material"
distort={1} // Strength, 0 disables the effect (default=1)
speed={10} // Speed (default=1)
/>
</Box>
)
}
//CANVAS DECLARATION SECTION
export default function Main() {
const dirLight = useMemo(()=>{
const light = new THREE.DirectionalLight('white');
light.castShadow=true;
//Set up shadow properties for the light
light.shadow.mapSize.width = 10240
...
},[])
return (
<div className="canvasContainer">
<Canvas
linear = "true"
frameloop="demand"
shadows = "true"
shadowMap
>
<MyCamera position={[0, 0, 30]} infLimit={-1000} supLimit ={0} />
<ambientLight intensity={0.2}/>
<primitive object={dirLight} position={[30, 0, 30]} />
<primitive object={dirLight.target} position={[0, 0, 0]} />
<mesh receiveShadow position={[0,0,-2]}>
<planeBufferGeometry attach="geometry" args={[1000, 1000]} />
<meshStandardMaterial attach="material" color="gray" />
</mesh>
<MyBox position={[8,0,0]}/>
</Canvas>
</div>
)
}
Any solutions to this issue?
I've installed next-transpile-modules and have included a next.config.js file as follows:
const withTM = require('next-transpile-modules')(['three', '@react-three/drei'])
module.exports = withTM()
Your assistance is greatly appreciated, troubleshooting with next.js can be quite challenging.