1、效果图

2、使用步骤

2.1、引入文件

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';

2.2、使用辉光通道

 const renderPass = new RenderPass(this.scene, this.camera);
        this.composer = new EffectComposer(this.webGLRenderer);
        /**
         * UnrealBloomPass的参数
         * 1:辉光所覆盖的场景大小
         * 2：辉光的强度
         * 3：辉光散发的半径
         * 4：辉光的阈值（场景中的光强大于该值就会产生辉光效果）
         */
        const unrealBloomPass = new UnrealBloomPass(new Vector2(window.innerWidth, window.innerHeight), 1, 10, 0.5);
        unrealBloomPass.renderToScreen = true;
        this.composer.addPass(renderPass);
        this.composer.addPass(unrealBloomPass);

2.3、使用组合器进行渲染时设置

        this.webGLRenderer.autoClear = false;
        this.composer.render(new Clock().getDelta());

3、完整源代码

import { PerspectiveCamera, Scene, Mesh, WebGLRenderer, SphereGeometry, TextureLoader, MeshPhongMaterial, AmbientLight, PointLight, Vector2, Clock } from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';
export class LearnShader {
    private scene!: Scene;
    private camera!: PerspectiveCamera;
    private webGLRenderer!: WebGLRenderer;
    private composer!: EffectComposer;


    constructor() {
        this.scene = new Scene();
        this.camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
        this.camera.position.set(100, 100, 200);
        this.camera.lookAt(this.scene.position);
        this.webGLRenderer = new WebGLRenderer({ antialias: true });
        this.webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(this.webGLRenderer.domElement);



        const geometry = new SphereGeometry(40, 40, 40);
        const material = new MeshPhongMaterial({
            map: new TextureLoader().load('../assets/Earth.png'),
            normalMap: new TextureLoader().load('../assets/EarthNormal.png'),
            specularMap: new TextureLoader().load('../assets/EarthSpec.png'),
            specular: 0xff0000,
            shininess: 3
        });
        const mesh = new Mesh(geometry, material);
        this.scene.add(mesh);

        const renderPass = new RenderPass(this.scene, this.camera);
        this.composer = new EffectComposer(this.webGLRenderer);
        /**
         * UnrealBloomPass的参数
         * 1:辉光所覆盖的场景大小
         * 2：辉光的强度
         * 3：辉光散发的半径
         * 4：辉光的阈值（场景中的光强大于该值就会产生辉光效果）
         */
        const unrealBloomPass = new UnrealBloomPass(new Vector2(window.innerWidth, window.innerHeight), 1, 10, 0.5);
        unrealBloomPass.renderToScreen = true;
        this.composer.addPass(renderPass);
        this.composer.addPass(unrealBloomPass);

        // 环境光
        const ambientlight = new AmbientLight(0xffffff);
        this.scene.add(ambientlight);
        // 点光源
        const pointLight = new PointLight(0xffffff);
        pointLight.position.set(100, 100, 100);
        this.scene.add(pointLight);

        new OrbitControls(this.camera, this.webGLRenderer.domElement);
        window.addEventListener('resize', () => this.onWindowResize());
        this.render();
    }

    private onWindowResize() {
        this.webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix(); //相机属性发生变化更新投影矩阵
    }
    private render() {
        this.webGLRenderer.autoClear = false;
        window.requestAnimationFrame(() => this.render());
        // this.webGLRenderer.render(this.scene, this.camera);
        this.composer.render(new Clock().getDelta());
    }

}