THREEJS辉光与景深特效

本文详细介绍了如何在场景背景为黑色的前提下,运用THREE.js库实现辉光和景深效果,包括关键代码和通道顺序调整。通过实例展示了如何创建渲染通道、Bloom Pass和Bokeh Pass,以及如何将它们组合到Effect Composer中以增强视觉体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果预览

辉光效果:

景深效果:

核心代码

辉光和景深尽量把场景背景设置为黑色,要不影响效果。

// 设置场景背景色为黑色
scene.background = new THREE.Color(0, 0, 0)

// 创建渲染通道
const renderPass= new RenderPass(scene, camera)

// 创建辉光bloom通道, 强度1.5,半径0,阈值0
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0, 0)

// 创建景深参数
const params = {
   focus: 0, // 聚焦
   aspect: ts.camera.aspect,
   aperture: 0.000005, // 孔径
   maxblur: 1, 
   width: window.innerWidth,
   height: window.innerHeight
}

// 创建景深通道
const bokehPass = new BokehPass(scene, camera, params)

// 创建效果合成器
const composer = new EffectComposer(renderer)

// 添加通道,注意顺序
composer.addPass(renderPass)
composer.addPass(bloomPass)
composer.addPass(bokehPass)

// 别忘记在render中添加composer
function render() {
    renderer.render(scene, camera)
    composer.render()
    requestAnimationFrame(render)
    
}

在向composer添加通道时,要注意顺序,如果辉光和景深共存的情况下,景深要添加在辉光后面,否则先设置景深再设置辉光后,景深效果就没了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值