利用 TWEEN 的缓动算法计算出各个粒子每一次变化的坐标位置，从初始位置到结束位置时间设置为2s（可自定义），每次执行计算之后都需要将attributes的position属性设置为true，用来提醒场景需要更新，在下次渲染时，render会使用最新计算的值进行渲染。
let pos = { val: 1 }; tween = new TWEEN.Tween(pos).to({ val: 0 }, 2500).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(callback); tween.onComplete(function () { console.log('过渡完成complete') }) tween.start(); function callback() { let val = this.val; let particles = particleSystem.children; for (let i = 0; i < particles.length; i++) { let _attributes = particles[i].geometry.attributes let name = particles[i].name if (name.indexOf('_') === -1) { let positionEnd =_attributes.positionEnd.array let position1 =_attributes.position1.array let count =_attributes.position.count for (let j = 0; j < count *3; j++) { _attributes.position.array[j] = position1[j] *val + positionEnd[j] * (1 - val) } } _attributes.position.needsUpdate = true // 设置更新 } }
7. 添加渲染场景render
创建容器。
定义render渲染器，设置各个参数。
将渲染器添加到容器里。
自定义的渲染函数 render，在渲染函数里面我们利用 TWEEN.update 去更新模型的状态。
调用自定义的循环动画执行函数 animate，利用requestAnimationFrame方法进行逐帧渲染。
let container = document.createElement('div'); document.body.appendChild(container); renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setClearColor(scene.fog.color); renderer.setClearAlpha(0.8); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); // 添加webgl渲染器 function render() { particleSystem.rotation.y += 0.0001; TWEEN.update(); particleSystem.rotation.y += (mouseX + camera.rotation.x) * .00001; camera.lookAt(new THREE.Vector3(-10, -5, -10)) controls.update(); renderer.render(scene, camera); } function animate() { // 开始循环执行渲染动画 requestAnimationFrame(animate); render(); }
8. 添加鼠标操作事件实现角度控制
我们还可以添加鼠标操作事件实现角度控制，其中winX、winY分别为window的宽高的一半，当然具体的坐标位置可以根据自己的需求进行计算，具体的效果如下图所示。
document.addEventListener('mousemove', onDocumentMouseMove, false); function onDocumentMouseMove(event) { mouseX = (event.clientX - winX) / 2; mouseY = (event.clientY - winY) / 2; }
三、优化方案
1. 减少粒子数量
随着粒子数量的增加，需要的计算每个粒子的位置和大小将会非常耗时，可能会造成动画卡顿或出现页面假死的情况，所以我们在建立模型时可尽量减少粒子的数量，能够有效提升性能。
在以上示例中，我们改变导出模型的精细程度，可以得到不同数量的粒子系统，当粒子数量达到几十万甚至几百万的时候，在动画加载时可以感受到明显的卡顿现象，这主要是由于fps比较低，具体的对比效果如下图所示，左边粒子数量为30万，右边粒子数量为6万，可以明显看出左边跳帧明显，右边基本保持比较流畅的状态。
2. 采用GPU渲染方式
编写片元着色器代码，利用webgl可以为canvas提供硬件3D加速，浏览器可以更流畅地渲染页面。目前大多数设备都已经支持该方式，需要注意的是在低端的设备上由于硬件设备原因，渲染的速度可能不及基于cpu计算的方式渲染。
四、总结
综上所述，实现粒子动效的关键在于计算、维护每个粒子的位置状态，而three.js提供了较为便利的方法，可以用于渲染整个粒子场景。当粒子数量极为庞大时，想要实现较为流畅的动画效果需要注意优化代码、减少计算等，也可以通过提升硬件配置来达到效果。本文中的案例为大家展示了3D粒子动效如何实现，大家可以根据自己的实际需求去制作更炫酷的动态效果。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: