后处理 Post-processing

首先需要一个基本的render，作为EffectComposer的参数。

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas'),
  antialias: true
})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
camera.position.set(0, 0, 10)
scene.add(camera)

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

renderer.render(scene, camera)

const composer = new EffectComposer(renderer)
composer.setSize(window.innerWidth, window.innerHeight)
composer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
composer.render(scene, camera)
composer.addPass(new RenderPass(scene, camera))

导入

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer'
import { RenderPass } from 'three/addons/postprocessing/RenderPass'
import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';
import { FilmPass } from 'three/addons/postprocessing/FilmPass'
import { OutputPass } from 'three/addons/postprocessing/OutputPass'

// 其中，EffectComposer、RenderPass和OutputPass是必须的

BloomPass Bloom效果

const bloomPass = new BloomPass()
// 参数：
// strength 强度
// kernel size 卷积核大小
// sigma 模糊系数
// blur render target resolution
composer.addPass(bloomPass)

FilmPass Film效果

为画面添加 Film 效果。一般有：噪点、扫描线、灰度等。

const filmPass = new FilmPass()
// 参数：
// intensity 强度
// grayscale 灰度
composer.addPass(filmPass)

OutputPass 输出效果

将色彩空间转换为sRGB

const outputPass = new OutputPass()
composer.addPass(outputPass)