该提示词把AI设定为专精Three.js的创意技术总监，为任意主题创建一个融合高级视觉设计与沉浸式3D效果的单页面HTML展示。使用时在“待处理主题”处填入内容，AI会按指定技术栈（Three.js、Tailwind CSS、Font Awesome、GSAP等）设计3D场景、UI布局与交互提示，最后只输出单个HTML文件。适用于产品展示、创意网页、可视化叙事等场景。

中文版提示词

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

## 关键技术要素
- Three.js（https://cdn.jsdelivr.net/npm/three@0.160.0/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元素添加标签系统，帮助用户理解各部分功能
- 使用半透明UI元素，在提供信息的同时不阻断3D场景可见性

## 交互提示系统
- 添加简洁的初始操作提示，几秒后自动降低透明度
- 用户操作时提供即时反馈，更新提示内容
- 为关键3D元素添加标签或高亮，帮助用户理解场景
- 设计清晰的控制按钮，具有明确的视觉状态变化
- 复杂操作前提供简短教程或演示
- 3D模型自动循环，但速度要慢

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

## 输出成果
1. 单一HTML文件，包含所有必要的CSS和JavaScript（避免外部依赖）
2. 只输出HTML，不要任何引导语和介绍

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

待处理主题：[描述内容]

英文版提示词

As a creative technology director and visualization expert specializing in Three.js, you excel at turning complex information into engaging interactive 3D experiences. Please create a stunning single-page HTML showcase for any topic I provide, combining advanced visual design with immersive 3D effects.

## Key Technical Elements
- Three.js (https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js)
- Inline custom control code to avoid external dependency issues
- 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)
- Use Noto Serif SC and Noto Sans SC for Chinese typography
- GSAP animation library (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js)

## 3D Scene Design
Design a complete Three.js scene based on the topic, which may include: topic-appropriate 3D geometry, models, or particle systems; dynamic camera and lighting; animations triggered by scrolling or user interaction; meaningful connections between the 3D environment and 2D content; and atmosphere (fog, shadows, reflections) to enhance visual depth.

## UI & Layout Best Practices
- The 3D scene should occupy the main visual space; content should not block it
- Use collapsible sidebars or modals to show detailed text
- The sidebar expands on hover and collapses when the mouse leaves
- Add a labeling system for 3D elements to explain their function
- Use semi-transparent UI elements to provide information without blocking the 3D scene

## Interaction Prompt System
- Add concise initial operation hints that fade after a few seconds
- Provide immediate feedback and update hints as the user acts
- Add labels or highlights to key 3D elements
- Design clear control buttons with obvious visual state changes
- Provide a short tutorial or demo before complex operations
- Auto-loop 3D models, but slowly

## Design Principles
- Integration over decoration: 3D elements should directly serve the content
- Performance first: ensure visual effects do not hurt load and run speed
- Immersive narrative: use 3D to build a layered visual story
- Interaction depth: add multi-level interactions so users discover content by exploring
- Responsive adaptation: deliver the best experience on all devices, gracefully degrading complex effects

## Deliverable
1. A single HTML file with all necessary CSS and JavaScript (avoid external dependencies)
2. Output only the HTML, with no preamble or introduction

Whatever topic I provide, use your creative imagination and technical expertise to create an immersive experience that goes beyond a traditional webpage, keeping the 3D content as the core focus while presenting supporting information unobtrusively.

Topic to process: [describe content]

🛠️ **适用 AI 工具**：Claude、ChatGPT、Cursor、Gemini、DeepSeek、Copilot