3

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

ayaz
  • 35
  • 6

1 Answers1

2

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.

Mugen87
  • 28,829
  • 4
  • 27
  • 50