vue+threeJs 生成烟花效果

        嗨，我是小路。今天主要和大家分享的主题是“vue+threeJs 生成烟花效果”。        

今天在找找three,js项目进行练习，主要寻找的是生成烟花的效果。今天主要对整个项目的构建过程进行复盘。

1.以AI为导师

注意：在准备练习到时找案例，准备直接通过deepseek或者通义千问生成对应的代码，直接生成想要学习的案例，但实际效果不理想。主要有三个原因：

1、生成的代码比较老旧。在生成的代码中，还使用geometry生成自定义模型，而现在的three.js版本基本使用的bufferGeometry来生成。

2、生成的项目欠缺，在本地的环境中跑不起来。本地环境和线上的不一致，ai不会考虑这个代码能不能执行成功，而且代码里面有部分内容确实，根本生成不了想要的效果。

3、生成的代码不是自己想要的。想通过AI生成项目来练习，需要不停的多次修改提示词，这样才会偶尔生成自己想要的项目出来；更多的是生成的是一些带插件的代码的项目，没有通过练习提升掌握three.js框架的作用。

其优点就是：项目的注释说明很清晰，生成步骤很清晰，让人更容易寻找思路去做项目。

2.以代码为师

注意：在github和gitee上有很多three.js项目的项目，这些都可以下载下来进行项目联系，不仅可以提升自己对three.js框架的运用，掌握他的代码技巧。

如在当前项目中，直接是生成了一个class类进行封装；但自己在运用时，更习惯的运用vue3的方法，const 成一个个函数；

在vue的框架中，运用three.js更多的是重新生成canvas进行渲染；较少运用vue的双向绑定。

二、实例代码

三、复盘总结

       三人行，必有我师；别忘了，还可以以AI为师！

都看到这里了，记得【点赞】+【关注】哟。

参考文章：

使用 Three.js 创建烟花粒子特效教程_threejs 粒子特效-CSDN博客