Prompt-3D教学展示网页设计指南

[!info] 阅读导览
全文 2 节：3D 教学展示案例（1.1，4 个可体验案例）→ Prompt 模板设计（1.2，完整可复制的 Three.js 模板 + 使用指南 + 适用场景）

flowchart LR
    A[3D 教学展示案例<br>四合院 · 大模型 · 啤酒 · 巧克力] --> B[Prompt 模板<br>Three.js + Tailwind + GSAP]
    B --> C[替换主题关键词]
    C --> D[交给 AI 生成 HTML]
    D --> E[部署上线]

1. Prompt-3D 教学展示网页设计指南

1.1. 3D 教学展示案例

以下案例展示了如何用 3D 交互形式呈现教学内容，均可直接在线体验。

1.1.1. 四合院探索

项目链接：四合院 3D 交互展示

四合院3D交互展示

该项目通过 Three.js 技术构建了传统中国四合院的 3D 交互模型，用户可以自由探索建筑结构和文化特点。

1.1.2. 大模型工作原理

项目链接：大模型工作原理可视化

大模型工作原理可视化

这个项目将复杂的大语言模型工作原理转化为直观的 3D 可视化展示，帮助用户理解 AI 模型的内部运作机制。

1.1.3. 精酿啤酒工艺

项目链接：精酿啤酒制作工艺展示

精酿啤酒制作工艺展示

通过 3D 交互式展示，用户可以了解精酿啤酒从原料到成品的完整制作工艺流程。

1.1.4. 巧克力制作工艺

巧克力制作工艺展示

这个项目展示了从可可豆到成品巧克力的完整制作过程，通过 3D 模型和交互式元素增强学习体验。

1.2. Prompt 模板设计

1.2.1. Three.js 教学展示网页 Prompt 模板

作为一名专精于 Three.js 的创意技术总监和可视化专家，你擅长将复杂信息转化为引人入胜的交互式3D体验。请为我提供的任何主题或内容创建一个令人惊艳的单页面HTML展示，融合高级视觉设计和沉浸式3D效果。

## 关键技术要素

使用以下技术栈构建沉浸式体验：
- Three.js (https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js)
- 内嵌自定义控件代码，避免外部依赖问题
- Tailwind CSS (https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css)
- Font Awesome (https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css)
- 中文排版使用 Noto Serif SC 和 Noto Sans SC
- GSAP动画库 (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js)

## 3D场景设计

根据内容主题，设计一个完整的Three.js场景，可能包括：
- 适合主题的3D几何体、模型或粒子系统
- 动态相机和光照设置
- 基于滚动或用户交互的动画效果
- 在3D环境与2D内容之间建立有意义的联系
- 环境氛围(雾效、阴影、反射等)增强视觉深度

## UI与内容布局最佳实践

遵循以下布局原则，确保3D内容成为焦点：
- 3D场景应占据主要视觉空间，内容不应遮挡3D体验
- 使用可折叠侧边栏或模态框展示详细文字内容
- 鼠标放到侧边栏，自动展开，移开后缩回去
- 为3D元素添加标签系统，允许用户了解各部分功能和意义
- 使用半透明UI元素，在提供信息的同时不阻断3D场景的可见性

## 交互提示系统

设计直观的交互引导体验：
- 添加简洁的初始操作提示，几秒后自动降低透明度
- 在用户执行操作时提供即时反馈，更新提示内容
- 为关键3D元素添加标签或高亮效果，帮助用户理解场景
- 设计清晰的控制按钮，具有明确的视觉状态变化
- 在复杂操作前提供简短教程或演示
- 3D模型自动循环旋转，但速度要慢，确保用户能够清晰观察细节

## 设计原则

遵循以下设计原则创建引人入胜的体验：
- 整合而非装饰：3D元素应直接服务于内容表达，而非仅作装饰
- 性能优先：确保复杂视觉效果不影响页面加载和运行速度
- 沉浸式叙事：利用3D效果构建内容的视觉叙事层次
- 交互深度：添加多层次交互，让用户通过探索发现内容
- 响应式适配：确保在所有设备上提供最佳体验，智能降级复杂效果

## 额外加分

可选择以下一种或多种创意方向拓展体验：
- 物理引擎模拟：使用cannon.js等物理引擎创建具有真实感的交互效果
- 粒子系统：利用粒子效果增强视觉表现力和主题氛围
- 后期处理：添加适当的后期处理效果提升画面质量

## 输出成果

提供包含以下内容的完整解决方案：
1. 单一HTML文件，包含所有必要CSS和JavaScript（避免外部依赖）
2. 只输出 HTML，不要其他任何引导语和介绍。

无论我提供什么主题，都请发挥你的创意想象力和技术专长，创造一个超越传统网页的沉浸式体验，确保3D内容成为核心焦点，而辅助信息以不干扰的方式呈现。

待处理主题：[在此输入具体主题]

1.2.2. 使用指南

  1. 复制上述 Prompt 模板
  2. 将最后一行的 [在此输入具体主题] 替换为您希望创建的 3D 教学展示主题
  3. 将完整 Prompt 提交给支持代码生成的 AI 助手（如 Claude 或 GPT-4）
  4. 获取生成的 HTML 文件并部署到您的网站服务器

1.2.3. 适用场景

  • 教育培训：复杂概念的可视化教学
  • 产品展示：3D 产品演示和交互式说明
  • 科学普及：科学原理和过程的动态展示
  • 文化遗产：历史建筑和文物的数字化展示
  • 工业培训：设备操作和工艺流程的模拟演示

[!success] 核心要点

  • 4 个可体验案例：四合院探索、大模型工作原理、精酿啤酒工艺、巧克力制作工艺（均为 Three.js 交互展示，qiaomu.ai 在线可体验）
  • 模板技术栈：Three.js r160 + Tailwind CSS 2.2.19 + Font Awesome 6.4.0 + GSAP 3.12.2 + 思源宋体/黑体（CDN 链接已核验全部有效）
  • 布局核心：3D 场景占据主要视觉空间，文字用可折叠侧边栏/模态框承载，半透明 UI + 元素标签系统
  • 交互设计：操作提示几秒后自动淡出、执行操作即时反馈、关键元素高亮、3D 模型慢速自动旋转
  • 设计原则：3D 整合而非装饰、性能优先、沉浸式叙事、多层次交互、响应式适配智能降级
  • 用法三步：替换 [在此输入具体主题] → 提交 Claude/GPT-4 → 部署 HTML