demos

src/composes/three/postprocessing.ts

@@ -0,0 +1,71 @@
+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,
+  }
+}