0

的使用给出错误，

The above error occurred in the <ForwardRef> component:
Uncaught TypeError: Cannot read property 'domElement' of undefined
    at OrbitControls.js:15
    at useEffectfulState.js:10
    at commitHookEffectListMount (react-dom.development.js:20573)

我尝试过的代码，

import React, { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { Physics, useCylinder, usePlane } from '@react-three/cannon'
import { OrbitControls, Environment } from '@react-three/drei'
import Vehicle from './Vehicle'

export default function Drive() {
  return (
    <>
      <Canvas dpr={[1, 1.5]} shadows camera={{ position: [0, 5, 15], fov: 50 }}>
      
        <fog attach="fog" args={['#171720', 10, 50]} />
        <color attach="background" args={['#171720']} />
        <ambientLight intensity={0.1} />
        <spotLight position={[10, 10, 10]} angle={0.5} intensity={1} castShadow penumbra={1} />
        <Physics broadphase="SAP" contactEquationRelaxation={4} friction={1e-3} allowSleep>
          <Plane rotation={[-Math.PI / 2, 0, 0]} userData={{ id: 'floor' }} />
          <Vehicle position={[0, 2, 0]} rotation={[0, -Math.PI / 4, 0]} angularVelocity={[0, 0.5, 0]} wheelRadius={0.3} />
          <Pillar position={[-5, 2.5, -5]} userData={{ id: 'pillar-1' }} />
          <Pillar position={[0, 2.5, -5]} userData={{ id: 'pillar-2' }} />
          <Pillar position={[5, 2.5, -5]} userData={{ id: 'pillar-3' }} />
        </Physics>
        <Suspense fallback={null}>        
          <Environment preset="night" />
        </Suspense>
        <OrbitControls />
      </Canvas>
      <div style={{ position: 'absolute', top: 70, left: 90}}>
        <pre style={{color:'white' }}>
          Must run fullscreen!
          <br />
          WASD to drive, space to brake
          <br />R to reset
        </pre>
      </div>
    </>
  )
}

当我删除<OrbitControls />它时，它完全没有错误，但我失去了轨道控制功能

4

0 回答 0