// 引入后处理扩展库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";

第一步

创建后处理对象

//创建后处理对象EffectComposer,webGL渲染器作为参数
const composer=new EffectComposer(renderer);
//创建一个渲染器通道，场景和相机作为参数
const renderPass=new RenderPass(scene,camera);
//设置renderPass通道
composer.addPass(renderPass);

第二步

修改渲染器函数渲染方法为后渲染函数

function render() {
  // mesh.rotateY(0.01);
  // mesh1.rotateY(0.01)
  // renderer.render(scene, camera);
  composer.render()
  requestAnimationFrame(render);
}

第三步 

创建OutlinePass通道（描边样式）

//创建OutlinePass通道
const v2=new THREE.Vector2(window.innerWidth,window.innerHeight);
const outlinePass=new OutlinePass(v2,scene,camera);
//颜色
outlinePass.visibleEdgeColor.set(0x00ffff);
//厚度
outlinePass.edgeThickness = 4;
//亮度
outlinePass.edgeStrength = 6;
//添加到后处理对象中
composer.addPass(outlinePass);
// 创建伽马校正通道
const gammaPass = new ShaderPass(GammaCorrectionShader);
composer.addPass(gammaPass);

第四部

添加点击事件，利用射线拾取模型对象

addEventListener('click', function (event) {
    const px = event.offsetX;
    const py = event.offsetY;
    //屏幕坐标转标准设备坐标
    const x = (px / window.innerWidth) * 2 - 1;
    const y = -(py / window.innerHeight) * 2 + 1;
    const raycaster = new THREE.Raycaster();
    //.setFromCamera()在点击位置生成raycaster的射线ray
    raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
    const cunchu = scene.getObjectByName('存储罐');
    // 射线拾取模型对象(包含多个Mesh)
    // 可以给待选对象的所有子孙后代Mesh，设置一个祖先属性ancestors,值指向祖先(待选对象)    
    for (let i = 0; i < cunchu.children.length; i++) {
        const group = cunchu.children[i];
        //递归遍历chooseObj，并给chooseObj的所有子孙后代设置一个ancestors属性指向自己
        group.traverse(function (obj) {
            if (obj.isMesh) {
                obj.ancestors = group;
            }
        })
    }
    // 射线交叉计算拾取模型
    const intersects = raycaster.intersectObjects(cunchu.children);
    console.log('intersects', intersects);
    if (intersects.length > 0) {
        // 通过.ancestors属性判断那个模型对象被选中了
        outlinePass.selectedObjects = [intersects[0].object.ancestors];
    }
})