1- 3D 教学展示案例

1.1- 四合院探索

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

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

1.2- 大模型工作原理

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

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

1.3- 精酿啤酒工艺

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

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

1.4- 巧克力制作工艺

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

2- Prompt 模板设计

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内容成为核心焦点，而辅助信息以不干扰的方式呈现。

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

2.2- 使用指南

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

2.3- 适用场景

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