threeJS鼠标单击模型边缘高亮

系列文章目录

threeJS单击模型高亮

---

---

前言

threeJS书中有后期颜色处理，有特定的组件可供使用

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、引入依赖文件

import * as THREE from 'three'
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'

二、使用步骤

1.创建效果组合器（EffectComposer）该着色器主要功能是解决锯齿问题。

代码如下（示例）：

  // 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。
  composer = new EffectComposer(config.renderer)

2.创建场景通道（RenderPass）

代码如下（示例）：

  // 新建一个场景通道  为了覆盖到原理来的场景上
  renderPass = new RenderPass(config.scene, config.camera)
  composer.addPass(renderPass)

3.创建物体边缘发光通道（OutlinePass）

  // 物体边缘发光通道
  outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), config.scene, config.camera, selectedObjects)
  outlinePass.selectedObjects = selectedObjects
  outlinePass.edgeStrength = 10.0 // 边框的亮度
  outlinePass.edgeGlow = 1 // 光晕[0,1]
  outlinePass.usePatternTexture = false // 是否使用父级的材质
  outlinePass.edgeThickness = 1.0 // 边框宽度
  outlinePass.downSampleRatio = 2 // 边框弯曲度
  outlinePass.pulsePeriod = 5 // 呼吸闪烁的速度
  outlinePass.visibleEdgeColor.set(parseInt(color)) // 呼吸显示的颜色
  outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0) // 呼吸消失的颜色
  outlinePass.clear = true
  composer.addPass(outlinePass)

4.创建自定义着色器通道（ShaderPass）

作用 ：通过ShaderPass构造函数把FXAAShader着色器和uniforms构成的对象作为参数，创建一个锯齿通道FXAAShaderPass,最后把锯齿通道加入到composer中。

// 自定义的着色器通道 作为参数
  effectFXAA = new ShaderPass(FXAAShader)
  effectFXAA.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight)
  effectFXAA.renderToScreen = true
  composer.addPass(effectFXAA)

5.必须要在animate函数中执行

composer.render()

   render() {
      requestAnimationFrame(this.render)
      TWEEN.update()
      this.renderer.render(this.scene, this.camera)
      this.controls.update()
       if (this.composer) {
      this.composer.composer.render()
      } 

    },

6.全部代码

/**
 * 鼠标单击高亮
 */
import * as THREE from 'three'
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'

/* 选中模型的数组  颜色 */
/**
 *
 * @param {mesh数组} selectedObjects
 * @param {高亮的颜色} color
 * @param {scene/camera/renderer} config
 */
let composer, renderPass, outlinePass, effectFXAA
const addColor = ( color, config) => {
  // 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。
  composer = new EffectComposer(config.renderer)

  // 新建一个场景通道  为了覆盖到原理来的场景上
  renderPass = new RenderPass(config.scene, config.camera)
  composer.addPass(renderPass)

  // 物体边缘发光通道
  outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), 		  config.scene, config.camera)

  outlinePass.edgeStrength = 10.0 // 边框的亮度
  outlinePass.edgeGlow = 1 // 光晕[0,1]
  outlinePass.usePatternTexture = false // 是否使用父级的材质
  outlinePass.edgeThickness = 1.0 // 边框宽度
  outlinePass.downSampleRatio = 2 // 边框弯曲度
  outlinePass.pulsePeriod = 5 // 呼吸闪烁的速度
  outlinePass.visibleEdgeColor.set(parseInt(color)) // 呼吸显示的颜色
  outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 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)
  return {
	  composer, // composer在render循环函数中调用
	  outlinePass // 实例化一次后设置  outlinePass.selectedObjects = selectedObjects
  }
}

export default addColor

---

总结

函数只要实例化一次就行，输出的outlinePass和composer。更换高亮模型数组给outlinePass就行