圈圈之地

代码： 全选

在 Three.js 中，調整畫面亮度主要有以下幾種最常用的方法。根據你的場景需求（是要調整整體曝光、改變燈光，還是做後期特效），可以選擇最適合的方式：

---

## 1. 調整渲染器的曝光度（最推薦）

如果你使用的是 `MeshStandardMaterial` 或 `MeshPhysicalMaterial`（基於物理的材質，PBR），最正統且效果最好的方式是調整 WebGLRenderer 的 **色調映射（Tone Mapping）** 與 **曝光度（Exposure）**。這就像調整相機的 ISO 或快門一樣。

```javascript
// 1. 設定色調映射（通常推薦 ACESFilmic，色彩最自然）
renderer.toneMapping = THREE.ACESFilmicToneMapping;

// 2. 調整曝光度（預設值為 1.0，調高畫面變亮，調低畫面變暗）
renderer.toneMappingExposure = 1.5; // 調整這個數值來控制亮度

```

---

## 2. 增加燈光強度（最直覺）

如果你的場景太暗，最直接的方法是增加場景中光源的強度（`intensity`）。

* **環境光（AmbientLight）：** 全局均勻照亮所有物體，沒有陰影。
* **平行光（DirectionalLight）/ 點光源（PointLight）：** 模擬太陽或燈泡。

```javascript
// 增加環境光強度
const ambientLight = new THREE.AmbientLight(0xffffff, 1.0); // 第二個參數是強度
scene.add(ambientLight);

// 動態調整
ambientLight.intensity = 2.5; // 數值越高越亮

```

---

## 3. 調整環境貼圖強度（環境照明）

如果你的場景使用了 HDR 或環境貼圖（`scene.environment` 或 `scene.background`）來進行基於圖像的照明（IBL），你可以透過調整材質的 `envMapIntensity` 或全域屬性來影響亮度。

```javascript
// 讓場景中所有標準材質對環境光的反應更強（變亮）
scene.traverse((object) => {
    if (object.isMesh && object.material) {
        object.material.envMapIntensity = 2.0; // 預設是 1.0
    }
});

```

---

## 4. 使用後期處理（Post-Processing）

如果你需要更精細的控制（例如螢幕亮度調整滑桿、對比度調整），可以使用 Three.js 的後處理效果網格（`EffectComposer`），並加上亮度/對比度著色器（Shader）。

需要引入 `EffectComposer`、`RenderPass` 和 `ShaderPass`：

```javascript
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { BrightnessContrastShader } from 'three/examples/jsm/shaders/BrightnessContrastShader.js';

// 初始化 Composer
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

// 加入亮度對比度控制
const brightnessContrastPass = new ShaderPass(BrightnessContrastShader);
composer.addPass(brightnessContrastPass);

// 調整亮度 (範圍通常在 -1 到 1 之間，0 為預設)
brightnessContrastPass.uniforms['brightness'].value = 0.2; 
// 調整對比度 (範圍通常在 -1 到 1 之間，0 為預設)
brightnessContrastPass.uniforms['contrast'].value = 0.1; 

// 在 requestAnimationFrame 中，要把 renderer.render 改為 composer.render
function animate() {
    requestAnimationFrame(animate);
    composer.render();
}

```

---

### 💡 總結建議

* **想做動態的「白天/黑夜」或「燈光開關」：** 用 **方法 2（調整燈光強度）**。
* **覺得畫面整體色彩灰暗、不夠鮮明：** 用 **方法 1（調整 `toneMappingExposure`）**，這是最不會讓色彩飽和度失真的做法。
* **想要做遊戲選單中的「螢幕亮度選單」：** 用 **方法 4（後期處理）** 效果最精準。