UNI-AI分享平台Appearance
Cursor + Three.js：零基础打造3D科普动画 🌌
🔍 核心要点
本教程将通过一个3D太阳系动画的实例，带您学习如何使用Cursor和Three.js，从零开始快速制作交互式3D科普动画，并一键部署分享。即使没有3D开发经验，也能轻松上手！
📺 视频教程
✨ 引言
视频从一个精美的3D太阳系动画开始，直观展示了使用Cursor和Three.js能够实现的惊艳效果。通过增添逼真的纹理和动态光影，我们可以创建出具有高度现实感的沉浸式交互体验。
📖 课程背景
Cursor系列课程
本节课的主题是如何制作简易的3D动画。相较于上周分享的Cursor+Blender MCP实现3D建模的方案（由于MCP不稳定且配置麻烦，劝退了不少同学），直接使用Three.js库来创建交互式3D场景更为简单、快捷，非常适合教学或科普场景。
🚀 教程步骤
1. 打开工具
- 推荐工具：建议使用最新版的Cursor或其海外版Trae。
- AI模型：这些工具支持强大的Claude 3.7 Sonnet模型，为代码生成提供更高质量的保障。
2. 编写提示词 (Prompt)
一个好的提示词是成功的一半。核心技巧是：
"使用最新版的Three.js生成一个关于 [你的主题] 的3D动画。"
为什么要强调"最新版"？
AI生成代码时具有一定的随机性，有时可能会使用过时的Three.js导入方式（如`import * from 'three/examples/jsm/...'`），导致程序运行报错。明确指定"最新版"可以有效避免此类问题。
3. 代码生成与预览
当AI生成代码后，有三种方式可以预览您的3D动画：
- 直接打开：双击项目中的
index.html文件，在浏览器中查看。 - 本地服务器：在VSCode或Cursor中安装
Live Server或Live Preview插件，通过启动一个本地HTTP服务器来运行，这是最推荐的方式。 - Cursor内预览：Cursor中
Live Preview插件内置了预览功能。
4. 动画调整与迭代
AI生成的动画通常是一个很好的起点，但往往需要进一步的微调和丰富：
- 增添元素：可以继续通过对话，要求AI增加更多细节，如为地球添加月球卫星。
- 增加交互：添加控制器（如OrbitControls），让用户可以用鼠标缩放和旋转视角。
- 添加说明_：为关键元素添加标签，使其更具科普价值。
5. 自定义主题
发挥您的想象力，尝试生成不同主题的3D动画！例如：
- 技术科普：大模型运行原理、区块链工作流。
- 文化展示：北京四合院结构交互式动画、古代建筑复原。
🏁 总结
本节课我们学习了如何利用Cursor和Three.js，从一个简单的提示词出发，快速生成、预览、迭代并最终部署一个交互式3D科普动画。