ThreeJS如何在VanillaJS中使用无NPM的Bloom后处理

ThreeJS 是一个用于创建和渲染 3D 图形的 JavaScript 库。它可以通过 CDN 在 VanillaJS 中使用，而无需使用 NPM 或其他包管理工具。下面是如何在 VanillaJS 中使用 ThreeJS 的 Bloom 后处理效果，无需 NPM 的步骤：

首先，通过 CDN 在 HTML 页面中引入 ThreeJS 的库文件：

<script src="https://cdn.jsdelivr.net/npm/three"></script>

创建一个 HTML 的 Canvas 元素，用于渲染 ThreeJS 的场景：

<canvas id="canvas"></canvas>

在 JavaScript 中编写代码，创建场景、相机和渲染器，并添加物体到场景中：

const canvas = document.getElementById('canvas');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas });

// 添加一个立方体到场景中
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

创建 Bloom 后处理效果：

// 创建一个渲染通道
const renderScene = new THREE.RenderPass(scene, camera);

// 创建一个 Bloom 效果通道
const bloomPass = new THREE.BloomPass(1, 25, 5, 256);

// 创建一个 EffectComposer，并将渲染通道和 Bloom 效果通道添加进去
const composer = new THREE.EffectComposer(renderer);
composer.addPass(renderScene);
composer.addPass(bloomPass);

渲染场景并应用后处理效果：

function animate() {
    requestAnimationFrame(animate);

    // 使立方体旋转起来
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 渲染场景
    composer.render();

    // 更新窗口大小
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
}

animate();

以上代码将在 VanillaJS 中创建一个使用 ThreeJS 的场景，并应用 Bloom 后处理效果。你可以根据自己的需求来调整代码和效果的参数。请注意，上述代码仅提供了基本的示例，如果需要更复杂的场景和效果，请参考 ThreeJS 官方文档或其他相关资源。

关于 Bloom 后处理效果的概念：Bloom 是一种渲染效果，通过模拟物体发出的光在摄像机镜头上的扩散和泛光效果，增加了物体的亮度和光晕效果。它常用于提升场景的真实感和艺术效果。

Bloom 后处理的分类：Bloom 后处理属于图像处理的一种，在渲染管道的后期阶段应用。它可以通过渲染通道和效果通道的组合来实现。

Bloom 后处理的优势：