EffectComposer、OutlinePass特效引发的问题和卡顿

最新推荐文章于 2025-02-21 10:48:25 发布

Beam007

最新推荐文章于 2025-02-21 10:48:25 发布

阅读量3.4k

点赞数 2

分类专栏： threejs

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/110163127

版权

本文主要讨论在Three.js中使用EffectComposer和OutlinePass为场景中的设备描边时遇到的问题。首先，由于重复添加相同设备到selectedObjects导致内部组件不可见，提出了两种去重方法以避免该问题。其次，当CSS2DRenderer与EffectComposer结合使用时，出现了严重的卡顿现象，尝试清理动态加载对象的缓存并未解决问题，最终发现移除EffectComposer即可解决卡顿，但这一解决方案并非理想。

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

给场景中的设备描边关键代码

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'

let composer = null
let outlinePassRing = null // 光圈

composer = new EffectComposer(renderer)
outlinePassRing = new OutlinePass(new THREE.Vector2(div3D.clientWidth, div3D.clientHeight), scene, camera)
let paramsRing = {
    edgeStrength: 3.0, // 强度
    edgeGlow: 1, // 边缘明暗度
    edgeThickness: 2.0, // 边缘雾化度
    pulsePeriod: 3, // 闪烁 值越大频率越低
    rotate: false,
    usePatternTexture: false // 是否使用皮肤
}
outlinePassRing.visibleEdgeColor.set('#ff0000')
outlinePassRing.edgeStrength = paramsRing.edgeStrength
outlinePassRing.edgeGlow = paramsRing.edgeGlow
outlinePassRing.pulsePeriod = paramsRing.pulsePeriod
outlinePassRing.edgeThickness = paramsRing.edgeThickness
outlinePassRing.renderToScreen = true
composer.addPass(outlinePassRing)

let dev = scene.getObjectByName(`设备名称`)
outlinePassRing.selected

最低0.47元/天解锁文章