【three.js】后期处理outlinePass描边实现点击选中物体效果

在Three.js中，要实现点击选中物体并应用描边效果，可以使用Raycaster进行射线投射检测点击事件，以及OutlinePass进行后期处理描边。以下是实现这一功能的代码示例：

// 假设已经有了Three.js的scene, camera, renderer和mesh对象
 
// 初始化射线投射器
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
 
// 创建一个OutlinePass对象，并将其添加到渲染过程中
const renderScene = new THREE.WebGLRenderer({ antialias: true });
const outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
renderScene.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderScene.domElement);
 
// 更新OutlinePass的大小
window.addEventListener('resize', () => {
  const { innerHeight, innerWidth } = window;
  outlinePass.setSize(innerWidth, innerHeight);
  renderer.setSize(innerWidth, innerHeight);
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
}, false);
 
function onMouseClick(event) {
  // 将鼠标位置转换为归一化设备坐标(-1 到 +1)
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
 
  // 使用射线投射器从相机和鼠标位置获取交点
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
 
  // 如果有物体被选中
  if (intersects.length > 0) {
    // 清除以前的描边
    outlinePass.selectedObjects = [];
    // 将选中的物体添加到描边列表
    outlinePass.selectedObjects.push(intersects[0].object);
  }
}
 
// 监听鼠标点击事件
renderScene.domElement.addEventListener('click', onMouseClick, false);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  outlinePass.renderToScreen = true;
  outlinePass.render(renderer, scene, camera);
}
 
animate();

在这段代码中，首先初始化了Raycaster和mouse向量，用于处理鼠标点击事件并检测物体交叉。然后创建了OutlinePass对象，并在resize事件中更新其大小。在鼠标点击事件处理函数onMouseClick中，使用射线投射器获取鼠标下方的物体，并将其添加到OutlinePass的selectedObjects数组中实现描边效果。最后，在渲染循环中调用animate函数，它会不断地渲染场景并通过OutlinePass应用描边效果。