Expo React Native中react-three/fiber的PointLight无法正常工作求助

你的问题核心是PointLight的位置在相机后方，导致球体朝向镜头的一面完全背光，所以呈现黑色。默认情况下，React Three Fiber的Canvas会创建一个位置在[0, 0, 5]的相机，而你设置的PointLight在[0, 10, -5]——这个位置在相机的正后方，光线只能照到球体的背面（远离镜头的一侧），自然看不到光照效果。

修改方案 #

调整PointLight的位置到相机前方区域，让光线能直接照射到球体朝向镜头的一面，同时可以适当提高intensity值增强亮度：

import React from 'react';
import { Canvas } from '@react-three/fiber';

export default function App() {
  return (
    <Canvas>
      {/* 将PointLight移到相机前方上方，确保照亮球体正面 */}
      <pointLight position={[0, 10, 5]} intensity={3} color="#fff" />
      <mesh rotation={[Math.PI / 4, 0, 0]}>
        <sphereGeometry args={[1, 32, 32]} />
        <meshStandardMaterial color={'orange'} />
      </mesh>
    </Canvas>
  );
}

额外排查建议 #

1. 材质特性适配：meshStandardMaterial需要直接光源（如PointLight、DirectionalLight）才能产生明暗立体感，AmbientLight是环境光，会均匀照亮所有面，所以只会呈现平面效果，这是正常现象。
2. 亮度参数调整：如果调整位置后还是偏暗，可以继续提高intensity值（比如3-5），根据实际效果微调。
3. 光源范围确认：你的distance={100}设置没问题，球体与光源的直线距离约11，远小于100的衰减范围，不会影响光照。

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