模型描边（一）—— three.js后期处理实现

最近在使用three.js库开发项目的时候，想实现鼠标悬停在物体上时，通过模型描边显示当前被选中物体的效果。因此，查询了很多关于模型描边、轮廓效果资料，实现该效果的方法有很多，这里只说一下通过后期处理实现的方法，因为该方法基本利用three.js封装好的后期处理通道来实现轮廓效果，所以实现简单，效果最好。不过，由于要用到后期处理，多多少少对性能有影响。

主要说一下要用到的轮廓通道OutlinePass，其可为边缘添加发光效果。下面是一些可配置的参数。

edgeStrength: 3.0, //强度 默认3
edgeGlow: 1, 强度 默认1
edgeThickness: 1.0, //边缘浓度
pulsePeriod: 0, 闪烁频率 默认0 值越大频率越低
usePatternTexture: false 使用纹理
visibleEdgeColor #ffffff 边缘可见部分发光颜色
hiddenEdgeColor #190a05 边缘遮挡部分发光颜色

下面说的是three.js通过后期处理实现轮廓及边缘发光效果的主要代码(来自官方案例)。其首先创建效果组合器，然后创建OutlinePass轮廓通道并设置相关属性，最后向效果组合器中添加轮廓通道。
官方案例中是通过Controls来控制OutlinePass各属性参数的，在使用时，直接在创建完通道后，设置相关属性参数来达到你想要的效果即可。

composer = new THREE.EffectComposer( renderer );//效果组合器

var renderPass = new THREE.RenderPass( scene, camera );//原始场景渲染结果
composer.addPass( renderPass );

outlinePass = new THREE.OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera );//轮廓通道

composer.addPass( outlinePass );

接下来说一下通过光线拾取来确定哪些物体显示轮廓效果，主要就是将被拾取物体添加至创建的数组，再将改数组赋值给outlinePass的selectedObjects，相关代码如下。

function addSelectedObject( object ) {
					selectedObjects = [];//被拾取物体列表
					selectedObjects.push( object );	//添加被拾取物体
				}

				function checkIntersection() {
					raycaster.setFromCamera( mouse, camera );
					var intersects = raycaster.intersectObjects( [ scene ], true );
					if ( intersects.length > 0 ) {
						var selectedObject = intersects[ 0 ].object;
						addSelectedObject( selectedObject );//添加被拾取物体
						outlinePass.selectedObjects = selectedObjects;//被拾取物体显示轮廓效果
					} 
				}

下面看一下官方案例的实现效果图：


官方案例链接，点击查看