React Three Fiber立方体无法显示 无报错问题求助

你的代码没有显示立方体，主要是以下几个原因导致的：

• 缺少光源：meshStandardMaterial必须依赖光照才能呈现可见的颜色/质感，没有光源时立方体是纯黑色，会和背景融为一体，看起来像没渲染。
• Canvas未设置尺寸：默认情况下Canvas组件没有明确的宽高样式，导致渲染区域不可见。
• 未处理meshRef.current为null的情况：虽然当前没报错，但这种写法存在潜在风险，组件挂载前触发更新可能引发问题。

修改后的代码 #

import { useRef, useFrame } from '@react-three/fiber';
import { Mesh, BoxGeometry, MeshStandardMaterial } from 'three';

function Cube(){
  const meshRef = useRef<Mesh>(null); 

  useFrame((state, delta) => {
    // 先判断ref是否存在，避免空值调用
    if (meshRef.current) {
      meshRef.current.rotation.x += delta;
    }
  });

  return(
    <>
      {/* 添加环境光和方向光，确保立方体被照亮 */}
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} intensity={1} />
      <mesh ref={meshRef}>
        <boxGeometry />
        {/* 给材质设置颜色，方便观察 */}
        <meshStandardMaterial color="royalblue" />
      </mesh>
    </>
  )
}

function App() {
  return (
    <div className="App" style={{ width: '100vw', height: '100vh' }}>
      {/* 给Canvas设置明确宽高，确保渲染区域可见 */}
      <Canvas style={{ width: '100%', height: '100%' }}>
        <Cube />
      </Canvas>
    </div>
  );
}

关键修改说明 #

1. 添加光源：ambientLight提供基础全局照明，directionalLight模拟定向光源（类似太阳光），二者配合让meshStandardMaterial正常显示。
2. 设置Canvas尺寸：通过父容器和Canvas的样式，让渲染区域占据全屏，确保立方体在可视范围内。
3. 空值判断：在useFrame中先检查meshRef.current是否存在，避免组件未挂载时的潜在错误。
4. 添加材质颜色：给meshStandardMaterial设置明确颜色，避免因颜色与背景一致导致的不可见问题。

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