Three.js 后期处理-通过黑点贴到图片上的效果-DotScreenPass-相机分层渲染
概述
本文介绍如何使用three.js的后期处理来制作通过黑点贴到图片上的效果,先来看效果图
注意:
**camera的默认layers层次为0
此处有三个大坑
renderer.autoClear = false 此代码一定要加上,必不可少
- 通道渲染顺序必须在renderer渲染之前执行 ,在执行之前清除颜色、深度和或模板缓存renderer.clear,然后将相机层级设置为1, 使用通道进行渲染
- 清除深度缓存,将相机的层级设置为0,使用WebGLRenderer渲染**
步骤
- 添加相应的后期处理js,对应的js在three的github中全部可以获取到
<!-- 后期处理js -->
<!-- EffectComposer(效果组合器)对象 -->
<script src="js/postprocessing/EffectComposer.js"></script>
<!-- RenderPass/该通道在指定的场景和相机的基础上渲染出一个新场景 -->
<script src="js/postprocessing/RenderPass.js"></script>
<!-- ShaderPass/使用该通道你可以传入一个自定义的着色器,用来生成高级的、自定义的后期处理通道 -->
<script src="js/postprocessing/ShaderPass.js"></script>
<!-- 传入了CopyShader着色器,用于拷贝渲染结果 -->
<script src="js/shaders/CopyShader.js"></script>
<!-- BloomPass/形成泛光的效果 -->
<script src="js/postprocessing/DotScreenPass.js"></script>
<script src="js/shaders/DotScreenShader.js"></script>
- 创建两个box, 将box进行layers进行分层是重要代码,camera默认渲染0层
let texture = new THREE.TextureLoader().load("ground.jpg")
var geometry1 = new THREE.BoxGeometry(4, 4, 4);
var material1 = new THREE.MeshBasicMaterial({
map: texture
});
var cube1 = new THREE.Mesh(geometry1, material1);
// 重要代码,将当前创建的box分配到0层
cube1.layers.set(0)
cube1.position.set(10, 0, 0)
scene.add(cube1);
var geometry2 = new THREE.BoxGeometry(4, 4, 4);
var material2 = new THREE.MeshBasicMaterial({
map: texture
});
var cube2 = new THREE.Mesh(geometry2, material2);
// 重要代码,将当前创建的box分配到1层
cube2.layers.set(1)
scene.add(cube2);
- 加入通道
// RenderPass这个通道会渲染场景,但不会将渲染结果输出到屏幕上
const renderScene = new THREE.RenderPass(scene, camera)
// THREE.DotScreenPass(center, angle, scale)
// center 微调点的偏移量,默认值为{x:0.5, y:0.5}
// angle 更改对齐方式 默认值为1.57
// scale 属性设置所有点的大小, 默认值为1
var dotScreenPass = new THREE.DotScreenPass(); // DotScrrenPass通道效果
dotScreenPass.renderToScreen = true;
//创建效果组合器对象,可以在该对象上添加后期处理通道,通过配置该对象,使它可以渲染我们的场景,并应用额外的后期处理步骤,在render循环中,使用EffectComposer渲染场景、应用通道,并输出结果。
const bloomComposer = new THREE.EffectComposer(renderer)
bloomComposer.setSize(el.offsetWidth, el.offsetHeight);
bloomComposer.addPass(renderScene);
bloomComposer.addPass(dotScreenPass)
bloomComposer.render()
- 在调用requestAnimationFrame的函数中调用
// 渲染器清除颜色、深度或模板缓存. 此方法将颜色缓存初始化为当前颜色
renderer.clear()
camera.layers.set(1)
bloomComposer.render()
// 清除深度缓存
renderer.clearDepth()
camera.layers.set(0)
renderer.render(scene, camera)
标签:
three.js
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体