如何在React Three Fiber中获取Scene对象的引用？

要在React Three Fiber（R3F）里拿到Three.js的scene对象，别用<Canvas>的ref——它指向的是DOM层面的canvas元素，不是Three.js的Scene实例，这就是你之前拿不到的原因。

正确的做法是用R3F提供的useThree钩子，它能直接获取当前场景的核心对象（scene、camera、gl等）：

import { Canvas, useThree } from '@react-three/fiber';
import * as THREE from 'three';
import { useEffect } from 'react';

function MyCustomComponent() {
  // 从useThree中解构出scene
  const { scene } = useThree();

  // 组件挂载时添加自定义Three对象
  useEffect(() => {
    // 示例：创建一个立方体
    const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const cube = new THREE.Mesh(geometry, material);
    
    // 用传统方式添加到scene
    scene.add(cube);

    // 组件卸载时清理资源
    return () => {
      scene.remove(cube);
      geometry.dispose();
      material.dispose();
    };
  }, [scene]);

  return null; // 该组件无需渲染JSX元素
}

// 主组件中使用
function App() {
  return (
    <Canvas>
      <MyCustomComponent />
      {/* 其他R3F组件或原生Three对象 */}
    </Canvas>
  );
}

如果要在子组件里获取scene，直接在子组件内调用useThree即可，不需要传递任何ref——R3F会通过上下文自动传递这些核心对象。

另外关于你提到的Geometry转BufferGeometry的问题，简单说明：原来的Geometry.vertices可以用BufferGeometry.setFromPoints()替代，把顶点数组转成THREE.Vector3数组后传入该方法，就能生成对应的BufferGeometry。

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