Threejs发光闪烁提示特效
  2OLUiU0s6ZEM 2023年12月11日 37 0

一、导语

发光闪烁特效应该在我们的项目中是经常需要去封装的一个特效吧,一般用于点击选择,选中物体,或者一些特效加持于中心物体,物体碰撞检测后的发光特效等等

Threejs发光闪烁提示特效_Threejs

二、分析

我们可以合理的使用后处理特效,上步骤:

  • 首先,我们利用后处理效果
  • 然后整合输出于屏幕
  • 再加持自定义着色器合成后处理效果

优点是性能更好,FPS不会掉,优化为我们场景可以加载更多特效或者物体做下更多铺垫哦

三、上基础代码

this.composer = new EffectComposer(this.renderer)

    const renderPass = new RenderPass(this.scene, this.camera)
    this.composer.addPass(renderPass)
	// 发光特效后处理器
    this.outlinePass = new OutlinePass(
      new THREE.Vector2(window.innerWidth, window.innerHeight),
      this.scene,
      this.camera
    )
    this.outlinePass.edgeStrength = 10
    this.outlinePass.edgeGlow = 1
    this.outlinePass.pulsePeriod = 2

四、动画切换,以及优化自定义着色器后处理效果

具体动态效果实现可以关注课程ThreejsWeb3D开发之可视化大数据地图,更多特效尽在里面,限时折扣哦

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月11日 0

暂无评论

2OLUiU0s6ZEM