Three.js地球开发—7.three.js波动光圈特效

先看最终要实现的效果：

需求：想实现一种波动光圈的特效—中间颜色深，距离中间越远颜色越浅，呈现动态的，颜色逐渐变浅；

纹理素材：

思路：

颜色渐变的实现：

既然说了颜色是逐渐变浅的，那么原始的贴图肯定是透明度逐渐降低，由于之前本身的纹理透明度是逐渐降低的，所以可以在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;

实现最终效果如下：