如何在 Three js (R3F) 中让定向光照亮整个半个球体？

Question

我需要用两个定向灯照亮一个球体，一个在前面，像阳光一样照亮球体的正面。一张朝后，展示城市的灯光。为此，我使用图层来解释光如何影响材质。

我的问题是，两个灯似乎没有照亮球体的两端。我尝试增加强度、规模、距离...

我重新创建了代码的简化版本来说明：

export default function Earth(): JSX.Element {
  const earthMapRef = useRef<any>();
  const frontLightRef = useRef<any>();
  const backLightRef = useRef<any>();

  useHelper(frontLightRef, DirectionalLightHelper, 1, 'red');
  useHelper(backLightRef, DirectionalLightHelper, 1, 'red');

  return (
    <Fragment>
      <PivotControls anchor={[0, 0, 0]} depthTest={false} scale={0.5} visible={true}>
        <mesh ref={earthMapRef} position={[0, 0, 0]}>
          <sphereGeometry args={[1, 64, 64]} />
          <meshStandardMaterial />
        </mesh>
      </PivotControls>

      <directionalLight
        ref={frontLightRef}
        position={[0, 0, 5]}
        scale={[3, 3, 3]}
        intensity={Math.PI}
        color="#FFFFFF"
      />

      <directionalLight
        ref={backLightRef}
        position={[0, 0, -5]}
        scale={[3, 3, 3]}
        intensity={Math.PI}
        color="#FFFFFF"
      />
    </Fragment>
  );
}

谢谢！

Answer 1

这让我想起了这个帖子中的一个案例： React drei 通过轨道控制固定光线方向

我的解决方案是基于一般照明。如果您通过混合灯光或/和全局照明朝这个方向移动，也许会很好？

我对它进行了一些修改，给了它三个灯。主要的一个照亮“黑色空间”，两侧有两个定向的。也许您会找到正确的参数。

import React, { useRef } from "react";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import "./styles.css";

function FollowCameraLight() {
  const lightRef = useRef();
  const { camera } = useThree();

  useFrame(() => {
    lightRef.current.position.copy(camera.position);
  });

  return <directionalLight ref={lightRef} intensity={10} />;
}

export default function App() {
  return (
    <div className="main">
      <Canvas>
        <directionalLight position={[0, 0, 2]} intensity={5} />
        <directionalLight position={[0, 0, -2]} intensity={5} />
        <FollowCameraLight />
        <OrbitControls enableZoom={false} enablePan={false} />
        <mesh>
          <capsuleGeometry args={[1, 1, 32]} />
          <meshStandardMaterial color={"red"} />
        </mesh>
      </Canvas>
    </div>
  );
}

https://codesandbox.io/p/sandbox/third-light-forked-5ths4p?file=%2Fsrc%2FApp.js%3A8%2C33