three.js 后期处理，物体高亮

效果图

在这里插入图片描述

代码

引入资源文件，在初始化时创建后处理对象

    // 用于边缘高亮的插件
    // 引入后处理扩展库EffectComposer.js
    import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
    // 引入渲染器通道RenderPass
    import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
    // 引入OutlinePass通道
    import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";
    // 伽马校正后处理Shader
    import { GammaCorrectionShader } from "three/addons/shaders/GammaCorrectionShader.js";
    // ShaderPass功能：使用后处理Shader创建后处理通道
    import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
    // SMAA抗锯齿通道
    import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';
    // 引入3D渲染器
    import { CSS3DRenderer, CSS3DObject,CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js';
 // 创建后处理对象-用于选中高亮
    function createComposer(){
        //创建后处理对象EffectComposer,webGL渲染器作为参数
        composer=new EffectComposer(renderer);
        //创建一个渲染器通道，场景和相机作为参数
        const renderPass=new RenderPass(scene,camera);
        //设置renderPass通道
        composer.addPass(renderPass);
        //创建OutlinePass通道
        const v2=new THREE.Vector2(window.innerWidth,window.innerHeight);
        outlinePass=new OutlinePass(v2,scene,camera);
        //颜色
        outlinePass.visibleEdgeColor.set(0x00ffff);
        //厚度
        outlinePass.edgeThickness = 4;
        //亮度
        outlinePass.edgeStrength = 6;
        // 闪烁次数
        outlinePass.pulsePeriod  = 2;
        // 光晕[0,1]  边缘微光强度
        outlinePass.edgeGlow = 1; 
        //添加到后处理对象中
        composer.addPass(outlinePass);
        //获取.setPixelRatio()设置的设备像素比
        const pixelRatio = renderer.getPixelRatio();
        // 抗锯齿
        const smaaPass = new SMAAPass(window.innerWidth * pixelRatio, window.innerHeight * pixelRatio);
        composer.addPass(smaaPass);
        // 创建伽马校正通道-用于模型颜色修正
        const gammaPass = new ShaderPass(GammaCorrectionShader);
        composer.addPass(gammaPass);
    }

配合点击事件，实现点击模型后高亮该模型

    // 点击事件
    document.addEventListener('mouseup', function (event) {
        const intersects = calcIntersects(event)
        let x2 = (event.clientX / window.innerWidth) * 2 - 1
        let y2 = -(event.clientY / window.innerHeight) * 2 + 1
        if(x == x2&&y==y2){
            // 判断是否有交点
            if (intersects.length > 0) {
                const pos = intersects[0].point;
                // 如果是我们要点击的模型
                let containsModelName = needClickModelList.some(item =>intersects[0].object.name.indexOf(item)!=-1);
                if(containsModelName){
                    // 高亮被选中的模型
                    outlinePass.selectedObjects = [intersects[0].object];
                    var coords = intersects[0].point;
                    coords.y = coords.y + 50
                    clearDialog()
                    createDialogHtml(coords,intersects[0].object.name) // 创建弹框
                }
            }
        }
    })

循环渲染

    // 循环渲染
    function animate() {
        requestAnimationFrame(animate)  
        // 重新更新性能
        composer.render() //修改渲染器函数渲染方法为后渲染函数
        controls.update()
    }