React Three Fiber自定义BufferGeometry不显示问题求助

• 基于React Three Fiber开发自定义几何体时，因three.js新版本已移除Geometry类，选择使用BufferGeometry实现，但编写完成后几何体始终无法渲染
• 场景内仅axesHelper坐标轴辅助器可正常展示，自定义BufferGeometry无任何输出
• 核心代码如下：

//Scene.jsx
import { Canvas, useFrame } from "react-three-fiber";
import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
import React, { useRef, useEffect } from "react";
import * as THREE from "three";
const Scene = () => {
  const cameraRef = useRef(null);
  const groupRef = useRef(null);


  useEffect(() => {
    cameraRef?.current?.lookAt(groupRef.current?.position);
  }, []);

  const vertices = new Float32Array([
    0.0, 0.0,  0.0,
    1.0, 0.0,  0.0,
    0.0, 1.0,  0.0,
      
    1.0, 0.0,  0.0,
    1.0, 1.0,  0.0,
    0.0, 1.0,  0.0
  ]);


  return (
    <>
      <axesHelper args={[10]} />
      <OrbitControls enableDamping dampingFactor={0.01} rotateSpeed={1} />
      <PerspectiveCamera
        ref={cameraRef}
        makeDefault
        args={[75, 800 / 600, 1, 1000]}
        position={[0, 0, 10]}
      />
          <mesh position={[0, 0, 0]} ref={groupRef}>
           <bufferGeometry>
             <bufferAttribute
               attachObject={["position"]}
                array={vertices}
                args={[vertices, 3]}
              />
           </bufferGeometry>
           <meshBasicMaterial args={[{ color: 0xff0000 }]} />
        <ambientLight args={["white", 0.25]} />
        <pointLight position={[2, 2, 2]} />
      </mesh>
    </>
  );
};

export default Scene;

// App.js
import { Canvas, useFrame } from "react-three-fiber";
import { PerspectiveCamera } from "@react-three/drei";
import React, { useRef, useEffect } from "react";
import Scene from "./Scene";

function App() {
  return (
    <div className="App">
      <Canvas>
        <Scene />
      </Canvas>
    </div>
  );
}

export default App;

代码存在3个核心问题导致几何体无法渲染：

1. BufferAttribute绑定方式错误
   旧版attachObject={["position"]}写法已不适配当前React Three Fiber版本，且args属性重复传入了顶点数组，导致位置属性初始化失败。
2. 组件层级错误
   ambientLight、pointLight光源组件被错误放在<mesh>标签内部作为子节点，光源不属于Mesh的子元素范畴，会引发R3F节点挂载异常。
3. 面剔除导致几何体不可见
   定义的三角形顶点顺序为顺时针方向，Three.js默认仅渲染逆时针方向的正面，从相机位置（Z轴正方向10单位处）看向Z=0平面的几何体时，看到的是几何体背面，会被面剔除逻辑过滤。

对应修改上述问题即可正常渲染红色平面：

1. 修正BufferAttribute的绑定写法，使用attach="attributes-position"挂载位置属性，明确传入itemSize和count参数
2. 将光源组件移到mesh外部，和mesh、相机、坐标轴辅助器同级
3. 调整顶点顺序为逆时针方向，或给材质添加side={THREE.DoubleSide}配置关闭面剔除

修复后的Scene.jsx代码如下：

//Scene.jsx
import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
import React, { useRef, useEffect } from "react";
import * as THREE from "three";
const Scene = () => {
  const cameraRef = useRef(null);
  const meshRef = useRef(null);

  useEffect(() => {
    cameraRef?.current?.lookAt(meshRef.current?.position);
  }, []);

  // 调整顶点顺序为逆时针，适配默认正面渲染规则
  const vertices = new Float32Array([
    0.0, 0.0,  0.0,
    0.0, 1.0,  0.0,
    1.0, 0.0,  0.0,
      
    1.0, 0.0,  0.0,
    0.0, 1.0,  0.0,
    1.0, 1.0,  0.0
  ]);

  return (
    <>
      <axesHelper args={[10]} />
      <OrbitControls enableDamping dampingFactor={0.01} rotateSpeed={1} />
      <PerspectiveCamera
        ref={cameraRef}
        makeDefault
        args={[75, window.innerWidth / window.innerHeight, 1, 1000]}
        position={[0, 0, 10]}
      />
      <ambientLight args={["white", 0.25]} />
      <pointLight position={[2, 2, 2]} />
      <mesh position={[0, 0, 0]} ref={meshRef}>
        <bufferGeometry>
          <bufferAttribute
            attach="attributes-position"
            array={vertices}
            count={vertices.length / 3}
            itemSize={3}
          />
        </bufferGeometry>
        <meshBasicMaterial args={[{ color: 0xff0000, side: THREE.DoubleSide }]} />
      </mesh>
    </>
  );
};

export default Scene;

额外优化：将相机宽高比从固定的800/600改为window.innerWidth / window.innerHeight，避免不同屏幕尺寸下画面拉伸；移除代码中未使用的useFrame、重复引入的无效依赖。

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