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

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

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

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);

// 创建一个渲染通道
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();