@react-three/drei 无法与 next.js 一起使用的东西
@react-three/drei stuff not working with next.js
我无法使用 drei 材质和其他东西,例如 MeshWobbleMaterial 或 MeshDistortMaterial 甚至 ContactShadows,我总是会收到如下错误:
react-three-fiber.esm.js:1383 Uncaught TypeError: Cannot read 属性 'getState' of null
在 useFrame (react-three-fiber.esm.js:1383)
在 MeshDistortMaterial.js:72 (在 MeshDistortMaterial 的情况下)
它引用的这个 null 是 react-three-fiber 上 useFrame 模块中的一个 'useContext(context)'。
我认为这与我也在使用 next,10.1.3 版本有关。
完整代码如下:
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'
//HERES WHERE THE MATERIAL IS USED
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>
)
}
//HERES JUST THE CANVAS STUFF
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 // default
light.shadow.mapSize.height = 10240 // default
light.shadow.camera.near = 0.1 // default
light.shadow.camera.far = 5000 // default
light.shadow.camera.top = -100 // default
light.shadow.camera.right = 100 // default
light.shadow.camera.left = -100 // default
light.shadow.camera.bottom = 100 // default
return light
},[])
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>
)
}
有解决办法吗?
我知道使用 next 您需要安装 next-transpile-modules 并创建下一个配置文件。我做到了,这是我的 next.config.js
const withTM = require('next-transpile-modules')(['three', '@react-three/drei'])
module.exports = withTM()
非常感谢您的帮助,next.js很难解决这个问题。
您是否尝试在 Canvas 的 children 中设置您的 useMemo?
我的猜测是您从场景上下文中实例化了一个 DirectionalLight。
这可能会导致此错误。
澄清一下,我是在正确的道路上,但是一些软件包导致了这个错误,一段时间后无法解决这个问题,我卸载并安装了所有依赖项,其中很多是在此期间更新,然后它正常工作。
我无法使用 drei 材质和其他东西,例如 MeshWobbleMaterial 或 MeshDistortMaterial 甚至 ContactShadows,我总是会收到如下错误:
react-three-fiber.esm.js:1383 Uncaught TypeError: Cannot read 属性 'getState' of null 在 useFrame (react-three-fiber.esm.js:1383) 在 MeshDistortMaterial.js:72 (在 MeshDistortMaterial 的情况下)
它引用的这个 null 是 react-three-fiber 上 useFrame 模块中的一个 'useContext(context)'。 我认为这与我也在使用 next,10.1.3 版本有关。
完整代码如下:
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'
//HERES WHERE THE MATERIAL IS USED
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>
)
}
//HERES JUST THE CANVAS STUFF
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 // default
light.shadow.mapSize.height = 10240 // default
light.shadow.camera.near = 0.1 // default
light.shadow.camera.far = 5000 // default
light.shadow.camera.top = -100 // default
light.shadow.camera.right = 100 // default
light.shadow.camera.left = -100 // default
light.shadow.camera.bottom = 100 // default
return light
},[])
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>
)
}
有解决办法吗?
我知道使用 next 您需要安装 next-transpile-modules 并创建下一个配置文件。我做到了,这是我的 next.config.js
const withTM = require('next-transpile-modules')(['three', '@react-three/drei'])
module.exports = withTM()
非常感谢您的帮助,next.js很难解决这个问题。
您是否尝试在 Canvas 的 children 中设置您的 useMemo?
我的猜测是您从场景上下文中实例化了一个 DirectionalLight。 这可能会导致此错误。
澄清一下,我是在正确的道路上,但是一些软件包导致了这个错误,一段时间后无法解决这个问题,我卸载并安装了所有依赖项,其中很多是在此期间更新,然后它正常工作。