第五章：光源(Lights)

在本章节中，我们将学习如何在React+Three.js应用程序中添加光源，从而增强场景的效果。我们将了解在Three.js中如何添加不同类型的光源，并利用React组件来控制光源的属性，以实现更加真实和吸引人的场景效果。

1. 在Three.js中添加光源

在Three.js中，光源是用来模拟现实中的光照效果的关键组件。Three.js提供了几种类型的光源，包括环境光、点光源、平行光等。每种光源都有不同的属性和效果。

让我们来添加一个点光源和一个环境光，来改进我们的场景效果：

import React, { useRef, useEffect } from 'react';
import * as THREE from 'three';
import CustomGeometry from './CustomGeometry';

const ThreeScene = () => {
  // ...

  useEffect(() => {
    // ...

    // 添加点光源
    const pointLight = new THREE.PointLight(0xffffff, 1);
    pointLight.position.set(2, 3, 4);
    scene.current.add(pointLight);

    // 添加环境光
    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.current.add(ambientLight);

    // ...

  }, []);

  // ...

  return (
    <div>
      <div ref={sceneRef} />
      <button onClick={toggleWireframe}>切换显示模式</button>
    </div>
  );
};

export default ThreeScene;

在上述代码中，我们使用THREE.PointLight类来创建一个点光源，并使用THREE.AmbientLight类来创建一个环境光。我们将点光源放置在(2, 3, 4)的位置，并设置强度为1。环境光的颜色设置为0x404040，这样我们的场景中就会有一些均匀的光照效果。

通过添加光源，我们让我们的场景看起来更加真实，物体的阴影和高光效果也更加明显。

2. 利用React组件控制光源属性

在React+Three.js应用程序中，我们可以使用React组件来控制光源的属性，从而实现动态的光照效果。

例如，让我们添加一个滑动条来调整点光源的强度：

import React, { useRef, useEffect, useState } from 'react';
import * as THREE from 'three';
import CustomGeometry from './CustomGeometry';

const ThreeScene = () => {
  // ...

  // 使用useState来跟踪点光源的强度
  const [pointLightIntensity, setPointLightIntensity] = useState(1);

  useEffect(() => {
    // ...

    // 创建点光源
    const pointLight = new THREE.PointLight(0xffffff, pointLightIntensity);
    pointLight.position.set(2, 3, 4);
    scene.current.add(pointLight);

    // 添加环境光
    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.current.add(ambientLight);

    // ...

  }, [pointLightIntensity]);

  // ...

  const handleIntensityChange = (event) => {
    setPointLightIntensity(event.target.value);
  };

  return (
    <div>
      <div ref={sceneRef} />
      <button onClick={toggleWireframe}>切换显示模式</button>
      <input
        type="range"
        min="0"
        max="2"
        step="0.1"
        value={pointLightIntensity}
        onChange={handleIntensityChange}
      />
    </div>
  );
};

export default ThreeScene;

在上述代码中，我们使用useState钩子来跟踪点光源的强度。我们添加了一个滑动条，并通过handleIntensityChange函数来更新点光源的强度。当滑动条的值改变时，pointLightIntensity状态会更新，从而触发useEffect钩子重新创建点光源，并设置新的强度。

通过这种方式，我们可以动态地调整点光源的强度，从而实现动态的光照效果。

在本章节中，我们学习了如何在Three.js中添加不同类型的光源，并利用React组件来控制光源的属性，从而增强场景的效果。在下一章节中，我们将学习如何应用纹理和材质来使场景更加逼真和细腻。敬请期待！