乐于分享
好东西不私藏

【源码】用 Three.js 打造未来感全息粒子

【源码】用 Three.js 打造未来感全息粒子

hologram-particles 是一个高质量的开源实时全息粒子效果项目,由开发者 Cortiz 打造。它使用 Three.js WebGPU + TSL Node Shaders + Next.js 技术栈构建,能够将任意 GLB 3D 模型转化为由6万个实例化球体组成的动态全息粒子云。

这是一个不仅能直接观看炫酷视觉效果,还非常适合学习和二次开发的优秀开源资源。项目提供了完整的3D Playground(交互式参数调试面板),用户可以实时调节几乎所有视觉参数。

特色功能

  • 纯 TSL Node Shaders:全部着色器逻辑使用 Three.js 的 TSL(Three.js Shading Language) 节点系统编写,无需 GLSL 文件,全部在 JavaScript 中完成,可读性和可维护性极高
  • WebGPU 原生渲染:基于 Three.js r182 的 WebGPU 渲染器,性能强劲
  • 支持任意 GLB 模型拖拽加载,粒子会自动适配模型表面
  • 完全参数化 ——所有视觉属性均通过实时图形用户界面显示
  • ......

源码

https://github.com/cortiz2894/hologram-particles

在线预览

https://hologram-particles.vercel.app/

启动

# Install dependenciespnpm install# Start the development serverpnpm dev

初识 Three.js 的奇妙世界
走进三维空间,与小编一起拥抱前端技术

--------------------------------

感谢您的阅读      

在看点赞 好文不断

相关学习资料