如何在React Three Fiber中将对象设置为光源？

要让太阳对象既呈现出发光的视觉效果，又能作为光源照亮场景，核心思路是将光源组件与太阳模型绑定在同一层级，同时给太阳模型添加自发光材质模拟外观。以下是两种常见场景的实现方案：

1. 用平行光模拟远距离太阳（贴近真实太阳效果） #

太阳光线近似平行，适合用DirectionalLight实现，将光源与太阳模型绑定后，两者的位置、旋转会同步：

import { useRef } from 'react';
import { Canvas } from '@react-three/fiber';
import { DirectionalLight } from '@react-three/drei';

function Sun() {
  const sunRef = useRef();

  return (
    <group ref={sunRef}>
      {/* 太阳模型：用自发光材质模拟发光外观 */}
      <mesh>
        <sphereGeometry args={[1, 32, 32]} />
        <meshBasicMaterial color="#ffdc00" emissive="#ffdc00" emissiveIntensity={1.8} />
      </mesh>
      {/* 绑定在太阳组下的平行光 */}
      <DirectionalLight
        color="white"
        intensity={2.2}
        position={[0, 0, 0]} // 光源与太阳中心重合
        castShadow
      />
    </group>
  );
}

function Scene() {
  return (
    <Canvas camera={{ position: [0, 8, 20] }}>
      <Sun />
      {/* 示例：接受光照的地面 */}
      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -6, 0]} receiveShadow>
        <planeGeometry args={[40, 40]} />
        <meshStandardMaterial color="#333" />
      </mesh>
    </Canvas>
  );
}

export default Scene;

2. 用点光源模拟近距离太阳（适合小场景/游戏风格） #

如果太阳是场景内的近距离光源，用PointLight实现从中心向外扩散的光照效果：

import { useRef } from 'react';
import { Canvas } from '@react-three/fiber';
import { PointLight } from '@react-three/drei';

function Sun() {
  const sunRef = useRef();

  return (
    <group ref={sunRef}>
      {/* 太阳模型 */}
      <mesh>
        <sphereGeometry args={[1.2, 32, 32]} />
        <meshBasicMaterial color="#ff851b" emissive="#ff851b" emissiveIntensity={2.2} />
      </mesh>
      {/* 绑定在太阳中心的点光源 */}
      <PointLight
        color="white"
        intensity={6}
        distance={60} // 根据场景大小调整光照范围
        decay={1}
        castShadow
      />
    </group>
  );
}

function Scene() {
  return (
    <Canvas camera={{ position: [0, 8, 20] }}>
      <Sun />
      {/* 示例：接受光照的立方体 */}
      <mesh position={[3, 0, 0]} castShadow receiveShadow>
        <boxGeometry args={[3, 3, 3]} />
        <meshStandardMaterial color="#0074d9" />
      </mesh>
    </Canvas>
  );
}

export default Scene;

关键注意事项 #

• 自发光材质（emissive）仅负责视觉上的发光效果，必须搭配光源组件才能真正照亮场景。
• 若需要阴影效果，需给光源开启castShadow，同时给接受阴影的对象添加receiveShadow属性。
• 可通过调整光源intensity、材质emissiveIntensity参数，匹配场景的光照强度需求。

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