I am currently working on a project using three.js and next.js, but I keep encountering this error:
'planeBufferGeometry is not part of the THREE namespace. Did you forget to extend? See:
As a beginner in three.js, I'm unsure what exactly is causing this issue.
In my page.js file (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
As a newcomer to three.js, I would appreciate any help or guidance regarding this problem.