three.js中 用 鼠标点击+呼吸灯

            // 鼠标事件 start
            window.addEventListener( 'click', onMouseMove, false );
            // 鼠标监听事件
            function onMouseMove( event ) {
                // 射线
                raycaster = new THREE.Raycaster();
                mouse = new THREE.Vector2(); 

                // 不占满屏幕 ，显示有所偏差
                // 这里的container就是画布所在的div，也就是说，这个是要拿整个scene所在的容器来界定的
                let container=document.getElementById("box")
                let getBoundingClientRect = container.getBoundingClientRect()
                mouse.x = ((event.clientX - getBoundingClientRect.left) / container.offsetWidth) * 2 - 1;
                mouse.y = -((event.clientY - getBoundingClientRect.top) / container.offsetHeight) * 2 + 1;

                // 占满屏幕下方这样写
                // mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
                // mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

                raycaster.setFromCamera( mouse, camera );
                // 获取 raycaster 直线和所有模型相交的数组集合
                // var intersects = raycaster.intersectObjects( scene.children );
                var intersects = raycaster.intersectObjects(scene.children, true);

                console.log(intersects,'intersects');
                // 将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可repeat
                // uv两个方向纹理重复数量
                // texture.repeat.set(4, 2);
                // 获取的对象进行移动操作
                outlineObj ([intersects[0].object])
                for ( var i = 0; i < intersects.length; i++ ) {
                    if(intersects[i].object.name=='黄色1232123'){
                        // intersects[i].object.material.color.set( 0xff00ff );
                        // intersects[i].object.position.x +=-0.06;
                        outlineObj ([intersects[i].object])
                    }

                }
            }
            //高亮显示模型（呼吸灯）
            function outlineObj (selectedObjects) {
                
                // 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。
                composer = new EffectComposer(renderer)
                // 新建一个场景通道  为了覆盖到原理来的场景上
                renderPass = new RenderPass(scene, camera)
                composer.addPass(renderPass);
                // 物体边缘发光通道
                outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera, selectedObjects)
                outlinePass.selectedObjects = selectedObjects
                // outlinePass.edgeStrength = 10.0 // 边框的亮度
                // outlinePass.edgeGlow = 1 // 光晕[0,1]
                // outlinePass.usePatternTexture = false // 是否使用父级的材质
                // outlinePass.edgeThickness = 10.0 // 边框宽度
                // outlinePass.downSampleRatio = 5 // 边框弯曲度
                // outlinePass.pulsePeriod = 10 // 呼吸闪烁的速度
                outlinePass.visibleEdgeColor.set(parseInt(0xFF00FF)) // 呼吸显示的颜色
                // outlinePass.hiddenEdgeColor = new THREE.Color(255, 255, 0) // 呼吸消失的颜色
                // outlinePass.clear = true
 
                composer.addPass(outlinePass)
                // 自定义的着色器通道 作为参数
                effectFXAA = new ShaderPass(FXAAShader)
                effectFXAA.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight)
                effectFXAA.renderToScreen = true
                composer.addPass(effectFXAA)
            }
            // 鼠标事件 end