Three.js地球开发—7.three.js波动光圈特效_threejs 实现波动光圈-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43787178/article/details/115070764

本文介绍了如何使用three.js在JavaScript中创建一种波动光圈特效，通过调整材质透明度和纹理缩放实现颜色渐变并赋予动态感。关键步骤包括设置透明度变化、周期性缩放以及随机初始缩放因子的应用。

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

先看最终要实现的效果：
在这里插入图片描述

需求：想实现一种波动光圈的特效—中间颜色深，距离中间越远颜色越浅，呈现动态的，颜色逐渐变浅；
纹理素材：
在这里插入图片描述

思路：
颜色渐变的实现：
既然说了颜色是逐渐变浅的，那么原始的贴图肯定是透明度逐渐降低，由于之前本身的纹理透明度是逐渐降低的，所以可以在three.js里面通过改变材质的透明度.material.opacity实现渐变的效果。
动感的实现：
通过不断的改变纹理大小.scale.set实现；
为了体现规则的周期性变化，所以缩放大小，和透明度大小到了一定程度要回复初始值，并且放在function render()里。
部分代码参考下：

// 渲染循环
function render() {
  _s += 0.01;
  mesh.scale.set(_s, _s, _s);
  mesh.material.opacity = 1 - (_s - 1) / 1.5;//缩放2.5对应0 缩放1.0对应1
  if (_s > 2.5) _s = 1;
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
}
render();

最终把之前的几个特效加在一起，组成一个Group（或者选择其中一个，把另外两个作为他的子对象，这样可以继承位置等其他属性；比起单个减少计算资源），注意观察，下面每个光圈缩放都不是同步的，实现很简单，生产一个随机数给光圈的初始缩放因子即可， mesh._s = Math.random()*1.0 + 1.0;实现最终效果如下：
在这里插入图片描述