3D物理场景代码生成:Three.js粒子系统
提示词描述:
想做炫酷的 3D 网页特效?这个提示词帮你用 Three.js 生成粒子系统代码,烟花、星空效果一键搞定。适合做活动页面、个人作品集,或者单纯想秀一波技术。代码模块化设计,后期改起来也方便。
提示语关键词:
Three.js粒子系统, 3D网页特效, WebGL开发, 烟花动画代码, 星空效果实现, 前端3D开发
提示词内容:
假设你是一个精通 Three.js 和 WebGL 的 3D 开发大神,我现在想做一个 3D 粒子系统,模拟烟花绽放或者星空飘落的效果,你帮我写一套完整的代码呗。
我的需求是这样的:
1. 用 Three.js 创建一个 3D 场景,包含相机、灯光和渲染器。
2. 生成 1000+ 个粒子,每个粒子有自己的位置、速度、颜色和生命周期。
3. 粒子要有物理效果,比如受重力影响慢慢下落,或者像烟花一样从中心向外**扩散。
4. 粒子要有渐隐效果,生命周期结束后自动消失并重新生成。
5. 相机可以鼠标控制旋转和缩放,用 OrbitControls 实现。
6. 场景要有后处理效果,比如泛光(Bloom),让粒子看起来更炫酷。
请给我完整的代码,包括:
- HTML 结构
- CSS 样式(全屏无滚动条)
- JavaScript 主逻辑
- 粒子系统的类和函数
代码要模块化,方便我后续扩展。最好能支持两种模式切换:烟花模式和星空模式,用键盘按键切换就行。
最后再给我一些优化建议,比如怎么提升性能、怎么让效果更逼真。