Three.js achieves material edge channel glow effect

Use of related APIs:

1. EffectComposer (a general framework for post-rendering processing, used to combine multiple rendering passes (pass) to create specific visual effects)

2. RenderPass (is the channel used to render the scene. It takes the scene and the camera as input, uses the Three.js default renderer (renderer) to render the scene, and outputs the result to the next rendering pass)

3. OutlinePass (is a channel used to create an edge line (outline) effect. It is based on depth information and normal information, and strokes objects that are in contact with the edge to highlight the outline of the object)

4. ShaderPass (is a channel of a custom shader. It allows you to specify a custom shader code and apply it to the rendering result of the scene. This way you can create a variety of graphics effects, such as Gaussian blur, post-processing effects, etc.)

Based on the previous article on Three.js loading external glb, fbx, gltf, obj model files, add the method of createEffectComposer (create effect synthesizer) and onChangeModelMeaterial (select material)

First introduce the relevant api

import {
    
     EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import {
    
     RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
import {
    
     OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'
import {
    
     ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
import {
    
     FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js'

Create Effects Synthesizer Method

	// 创建效果合成器
	createEffectComposer() {
    
    
		const {
    
     clientHeight, clientWidth } = this.container
		this.effectComposer = new EffectComposer(this.renderer)
		const renderPass = new RenderPass(this.scene, this.camera)
		this.effectComposer.addPass(renderPass)
		this.outlinePass = new OutlinePass(new THREE.Vector2(clientWidth, clientHeight), this.scene, this.camera)
		this.outlinePass.visibleEdgeColor = new THREE.Color('#4d57fd') // 可见边缘的颜色
		this.outlinePass.hiddenEdgeColor = new THREE.Color('#8a90f3') // 不可见边缘的颜色
		this.outlinePass.edgeGlow = 2.0 // 发光强度
		this.outlinePass.edgeThickness = 1 // 边缘浓度
		this.outlinePass.edgeStrength = 4 // 边缘的强度，值越高边框范围越大
		this.outlinePass.pulsePeriod = 100 // 闪烁频率，值越大频率越低
		this.effectComposer.addPass(this.outlinePass)
		// 抗锯齿
		let effectFXAA = new ShaderPass(FXAAShader)
		effectFXAA.uniforms.resolution.value.set(1 / clientWidth, 1 / clientHeight)
		this.effectComposer.addPass(effectFXAA)
	}

Select the material method, pass in the material name through getObjectByName to get the material that needs to set the luminous effect, and realize the material luminous effect by setting the selectedObjects parameter of the effect synthesizer.

  onChangeModelMeaterial(name) {
    
    
		const mesh = this.model.getObjectByName(name)
		this.outlinePass.selectedObjects = [mesh]	
	}

Change renderer.render() in the original sceneAnimation (method of scene animation frame rendering) to controls.update()

	sceneAnimation() {
    
    
		this.renderAnimation = requestAnimationFrame(() => this.sceneAnimation())
		this.effectComposer.render()
		this.controls.update()
		//this.renderer.render(this.scene, this.camera)
	}

The complete code can refer to: https://gitee.com/ZHANG_6666/Three.js3D/blob/master/src/views/renderModel.js

Interface effect comparison