Wbegl（ThreeJS）选中模型边缘高亮，官方示例webgl_postprocessing_outline如下：

主要是引用了几个js库：

	import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
	import { RenderPass } from './jsm/postprocessing/RenderPass.js';
	import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
	import { OutlinePass } from './jsm/postprocessing/OutlinePass.js';

选中显示模型边缘高亮部分

raycaster.setFromCamera( mouse, camera );

					const intersects = raycaster.intersectObject( scene, true );

					if ( intersects.length > 0 ) {

						const selectedObject = intersects[ 0 ].object;
						addSelectedObject( selectedObject );
						outlinePass.selectedObjects = selectedObjects;

					} else {

						// outlinePass.selectedObjects = [];

					}

设置高亮的各项参数：

// postprocessing

	composer = new EffectComposer(renderer);

	const renderPass = new RenderPass(scene, camera);
	composer.addPass(renderPass);

	outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
	composer.addPass(outlinePass);
	outlinePass.edgeStrength = 10;//边缘强度
	outlinePass.edgeGlow = 1;//缓缓接近
	outlinePass.edgeThickness = 4;//边缘厚度
	outlinePass.pulsePeriod = 1; //脉冲周期

最后还记得将composer.render();添加到animate更新：

function animate() {

				composer.render();

			}

将以上的所用到的抽取出来，实现以下效果：

将选中的目标书本显示高亮：

工程示例：

webgl(threejs)实现室内漫游-导航功能-应用于移动端_threejs全景漫游-Javascript文档类资源-CSDN下载