剑侠君特供：3D 图片粒子动画+Web Speech 语音声控源码，支持移动端 HTTPS 完美运行

🌟 项目简介

这是一款基于 Three.js 开发的 3D 视觉交互特效源码。它打破了传统的鼠标点击交互，实现了实时语音指令控制粒子形态切换。 代码可以将一张普通的 JPG/PNG 图片（默认使用动漫人物图）动态像素化，并支持在“初始散开”、“还原图片”、“凝聚球体”三种形态间通过中文指令无缝切换。

✨ 核心功能

1. 图片像素动态化：自动提取图片色彩与坐标，转化为成千上万个 3D 粒子。

2. 中文声控交互：

• 喊 “还原”：粒子从四面八方汇聚，精准拼凑出动漫原图。

• 喊 “收起来”：粒子迅速向中心靠拢，形成一个不断自转的发光球体。

• 喊 “散开”：粒子瞬间炸裂，随机漂浮在 3D 空间。

3. GPU 加速渲染：使用 GLSL 编写顶点着色器（Vertex Shader），确保在粒子数量达到数万个时，画面依然丝滑不卡顿。

4. 跨端适配：针对手机端（Safari/Chrome）进行了性能优化与权限补丁修复。

📖 使用说明（发布必读）

为了确保源码在你和用户手中完美运行，请务必注意以下几点：

1. 环境要求（最关键）

• HTTPS 协议：由于现代浏览器（Chrome、Safari 等）的隐私安全限制，必须在 HTTPS 环境下才能调用麦克风权限。

• 本地测试：在自己的电脑上测试时，请使用 VS Code 的 Live Server 插件或 localhost 环境打开，直接双击 HTML 文件可能无法触发语音功能。

2. 图片替换

• 源码默认加载名为 1.jpg 的图片。

• 建议图片：选择背景干净（最好是纯黑或透明）且对比度高的图片（如 Logo、二次元人物），效果最佳。

• 请确保图片文件与 HTML 文件处于同一根目录下。

3. 浏览器兼容性

• PC 端：推荐使用 Google Chrome 或 Edge。

• 手机端：

• iPhone (iOS)：必须使用 Safari 浏览器。

• 安卓 (Android)：必须使用 Chrome 浏览器。

• 警告：切勿在微信内置浏览器内直接打开，微信会限制语音权限。请引导用户“点击右上角在浏览器中打开”。

4. 指令技巧

• 点击页面中心的“开启粒子魔法”按钮后，看到“正在聆听”字样即可说话。

• 语音识别依赖网络环境，请确保网络通畅，且普通话发音尽量标准。

/ JX_Voice_Particles /
  ├── index.html   (核心代码)
  └── 1.jpg        (你的动漫人物图片)

“这不仅仅是一段代码，它是 3D 渲染与人工智能语音技术的完美交织。无论是用于个人网页炫技，还是作为大屏交互展示的参考模版，都是极佳的选择。”