@react 3/drei不使用next.js的东西

Question

我不能使用MeshWobbleMaterial或MeshDistortMaterial，甚至ContactShadows之类的材料和其他东西，我总是会收到一个错误，例如：

TypeError:无法读取属性'getState‘of null at useFrame (react tri-fiber.esm.js:1383) at MeshDistortMaterial.js:72 (以MeshDistortMaterial为例)

它所指的这个空值是一个“useContext(上下文)”，它位于react上的useFrame模块中--三个光纤。我认为这与我正在使用的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-模块并创建下一个配置文件。我做到了，这是我的next.config.js

const withTM = require('next-transpile-modules')(['three', '@react-three/drei'])

module.exports = withTM()

非常感谢您的帮助，很难用next.js解决这些问题。

Answer 1

为了澄清，我走上了正确的道路，但是一些包导致了这个错误的发生，在一段时间无法解决这个问题之后，我对所有的依赖程序进行了隔离和安装，其中很多都在这段时间内进行了更新，然后它就正常工作了。

Answer 2

你试过在画布的孩子中设置你的useMemo吗？

我的猜测是，您在场景上下文之外实例化一个DirectionalLight。这可能会导致这个错误。