planebuffergeometry is not part of the three namespace

Question

I am building a three.js project with next.js but I am getting this error:

'planeBufferGeometry is not part of the THREE namespace. did you forget to extend? see: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively

I am new in three.js I don't know what is the problem

in page.js(for 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>
    </>
  )
}

in 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

I am new in three.js I don't know what is the problem

Answer 1

In three.js the BufferGeometry alias has been deprecated for all geometry generators with r144. With r154, the aliases were eventually removed from the project.

So always use names like PlaneGeometry or BoxGeometry.