WebXR 3D模型沉浸式预览与多端适配器
无需安装庞大的3D软件，直接在浏览器中查看和调试3D模型，并提供一键进入头显设备沉浸式查看的功能。
复制下方提示词发给 AI (如 Claude/Cursor)：
请用纯 HTML+JS+CSS 编写一个“WebXR 3D模型沉浸式预览器”。
核心要求：
1. 核心渲染：引入 Google 的 <model-viewer> 标签，支持拖拽上传本地的 .glb 或 .gltf 格式模型。
2. 交互与环境：开启自动旋转和相机控制（camera-controls）。支持切换自带的几种中性光影环境（HDR），以凸显模型的材质质感。
3. XR 沉浸支持：必须包含 ar 属性，右下角提供一个“沉浸式查看”按钮，确保在 Vision Pro、Quest 或 PICO 等头显设备的浏览器中能直接唤起原生的空间计算预览模式。
4. UI 风格：摒弃复杂的工具栏，采用悬浮的半透明面板控制参数，整体类似 VisionOS 的 Liquid Glass 毛玻璃质感。
5. 交付：输出单文件 index.html 源码。
MixedReality (WebM) 转 MP4 纯本地转换器
在录制混合现实或带有透明通道的网页动效时，经常会生成 WebM 格式视频，但在普通播放器中兼容性较差，这个工具能纯本地将其转换为通用的 MP4。
复制下方提示词发给 AI：
请开发一个“MixedReality WebM 转 MP4 纯本地转换器”。
核心要求：
1. 核心技术：引入 FFmpeg.wasm 库，确保视频的解析、转码全部在浏览器客户端本地完成，不消耗服务器带宽。
2. 格式处理：重点优化 WebM (VP8/VP9) 转 MP4 (H.264) 的编码参数，保留画质的同时兼顾转换速度。
3. 交互体验：提供一个清晰的拖拽上传虚线框。上传后，提供一个进度条显示 FFmpeg 的转码进度，转换完成后自动弹出下载提示。
4. UI 规范：现代极简风格，使用细边框和深色调背景，按钮交互需要有平滑的发光反馈。
5. 交付：输出包含完整逻辑的单文件 HTML。
3D 模型材质贴图 (Texture) 在线替换器
想快速看看模型换一个颜色的效果，不需要打开电脑里的编辑软件。直接在网页上替换贴图，实时渲染。
复制下方提示词发给 AI：
请编写一个“3D模型贴图可视化替换工具”。
核心要求：
1. 渲染引擎：基于 Babylon.js 或 Three.js 搭建基础的 3D 场景，包含默认的灯光和底座。
2. 模型与材质库：支持拖拽基础的 OBJ 或 GLTF 模型。在界面右侧提供一个侧边栏，用户可以点击上传本地的图片（JPG/PNG）作为 BaseColor 贴图。
3. 核心功能：使用 Raycaster（射线检测）技术，用户鼠标点击模型上的某个部位，即可将刚上传的图片材质动态应用到该部位上。
4. 导出功能：一键将替换好贴图的模型重新打包导出为 GLB 文件。
5. 交付：输出单文件 HTML，代码需结构清晰。
AR 数字资产空间悬浮展厅生成器
用于将多个 3D 模型资产组合成一个可交互的虚拟空间，适合用来做数字艺术品或硬件产品的网页版沉浸式展厅。
复制下方提示词发给 AI：
请开发一个“纯前端 3D 资产空间悬浮展厅”。
核心要求：
1. 场景构建：利用 Babylon.js 构建一个无边界的虚拟展厅背景（采用高级的深灰渐变色）。
2. 多资产管理：支持批量上传多个 3D 模型文件。上传后，模型以特定的网格阵列（Grid）自动悬浮排布在 3D 空间中。
3. 交互漫游：支持用户使用鼠标拖拽旋转整个空间，或者点击单个模型时，相机平滑拉近（Camera Tweening）并聚焦展示该模型的细节，同时弹出该资产的文本描述面板。
4. UI 融合：文本描述面板必须采用 Apple 风格的 Liquid Glass 材质，悬浮在 3D 画布上方，做到真正的空间计算 UI 体验。
5. 交付：HTML 单文件交付。
核心总结：
开发 XR 与 3D 相关的在线工具，提示词的重点在于明确前端 3D 引擎库（如 Babylon.js 或 model-viewer），以及强调沉浸式 API 的调用与现代化的空间 UI 风格。只要指令清晰，AI 就能帮你打造出商业级的 3D 内容工作台。
