72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
import * as THREE from 'three'
|
|
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
|
|
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'
|
|
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
|
|
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'
|
|
|
|
export function usePostProcessing() {
|
|
/**
|
|
* 创建后期处理组合器
|
|
*/
|
|
function createComposer(
|
|
renderer: THREE.WebGLRenderer,
|
|
scene: THREE.Scene,
|
|
camera: THREE.Camera,
|
|
) {
|
|
const composer = new EffectComposer(renderer)
|
|
const renderPass = new RenderPass(scene, camera)
|
|
renderPass.clear = true
|
|
renderPass.clearDepth = true
|
|
composer.addPass(renderPass)
|
|
return composer
|
|
}
|
|
|
|
/**
|
|
* 创建辉光通道
|
|
*/
|
|
function createBloomPass(
|
|
width: number,
|
|
height: number,
|
|
strength = 1.5,
|
|
radius = 0.4,
|
|
threshold = 0.85,
|
|
) {
|
|
return new UnrealBloomPass(
|
|
new THREE.Vector2(width, height),
|
|
strength,
|
|
radius,
|
|
threshold,
|
|
)
|
|
}
|
|
|
|
/**
|
|
* 创建轮廓描边通道
|
|
*/
|
|
function createOutlinePass(
|
|
width: number,
|
|
height: number,
|
|
scene: THREE.Scene,
|
|
camera: THREE.Camera,
|
|
) {
|
|
const outlinePass = new OutlinePass(
|
|
new THREE.Vector2(width, height),
|
|
scene,
|
|
camera,
|
|
)
|
|
outlinePass.edgeStrength = 3
|
|
outlinePass.edgeGlow = 0.5
|
|
outlinePass.edgeThickness = 2
|
|
outlinePass.pulsePeriod = 0
|
|
outlinePass.visibleEdgeColor.set('#00ff00')
|
|
outlinePass.hiddenEdgeColor.set('#00ff00')
|
|
|
|
return outlinePass
|
|
}
|
|
|
|
return {
|
|
createComposer,
|
|
createBloomPass,
|
|
createOutlinePass,
|
|
}
|
|
}
|