使用Next.js开发Three.js项目遇planeBufferGeometry命名空间报错求助

错误原因 #

Three.js 在 r125 版本后废弃了 PlaneBufferGeometry，统一合并到 PlaneGeometry 中（底层依然是 BufferGeometry 实现，性能无差异）；同时在 react-three-fiber 中，Three.js 的类需要转换为短横线分隔的小写组件名使用。

修复步骤 #

修改 Ground.js 中的几何组件：
将原来的

<planeBufferGeometry attach="geometry" args={[100, 100]} />

替换为

<planeGeometry attach="geometry" args={[100, 100]} />

完整修复后的 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}>
            <planeGeometry attach="geometry" args={[100, 100]} />
            <meshStandardMaterial attach="material" map={groundTexture} />
        </mesh>
    )
}

export default Ground

内容的提问来源于stack exchange，提问作者ayaz