我正在使用next.js构建一个three.js项目，但收到以下错误：
'planeBufferGeometry不是THREE命名空间的一部分。你忘了延长吗？请参阅：https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively
我是新来的js我不知道有什么问题
在第.js页中（用于app.js）：

"use client"
import Image from 'next/image'
import styles from './page.module.css'
import { Canvas } from '@react-three/fiber'
import { Sky } from '@react-three/drei'
import Ground from './components/Ground'
import { Physics } from '@react-three/cannon'

export default function Home() {
  return (
    <>
      <Canvas>
        <Sky sunPosition={[100, 20, 100]} />
        <ambientLight intensity={0.5} />
        <Physics>
          <Ground />
        </Physics>
      </Canvas>
    </>
  )
}

字符串
在Ground.js中：

import { usePlane } from "@react-three/cannon";
import { groundTexture } from "../images/textures"
import * as THREE from "three";

const Ground = (props) => {
    const [ref] = usePlane(() => ({
        rotation: [-Math.PI / 4, 0, 0], position: [0, 0, 0]
    }))
    groundTexture.magFilter = THREE.NearestFilter;
    groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
    groundTexture.repeat.set(100, 100);

    return (
        <mesh ref={ref}>
            <planeBufferGeometry attach="geometry" args={[100, 100]} />
            <meshStandardMaterial attach="material" map={groundTexture} />
        </mesh>
    )
}

export default Ground

型
我是新来的js我不知道有什么问题