关于 three
three 是面向 Three.js 浏览器 3D 场景开发的技能，适合创建 WebGL 可视化、设置相机与灯光、加载资源和制作动画。它以基础场景模板为起点，并涵盖性能与资源清理实践。
主要功能
- 01浏览器 3D 场景搭建
- 02相机与灯光设置
- 03模型资源加载
- 04基于时间的动画循环
- 05场景资源释放与性能优化
适用场景
- 01从基础模板创建 Three.js 场景
- 02制作 WebGL 可视化
- 03加载 GLTF/GLB 模型并添加动画
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/three确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
README.mdevals/evals.jsontemplates/basic-scene.html详细介绍
Three.js
快速入门
在现代浏览器中打开 templates/basic-scene.html，或通过 HTTP 提供此仓库。
在创建浏览器 3D 场景、WebGL 可视化、设置摄像机和灯光、加载资源或编写动画循环时使用此技能。从 templates/basic-scene.html 中最简单的场景开始，然后仅在需要时添加几何体、材质、灯光和控件。
核心选择
- 使用
PerspectiveCamera呈现自然的 3D 视图，使用OrthographicCamera呈现技术视图或等距视图。 - 使用
Clock或经过的时间戳，让动画与时间相关。 - 替换场景时，释放几何体、材质和纹理。
- 对于外部模型，使用 GLTF/GLB；需要保证可复现性时，将资源保存在本地。
- 当对象数量成为瓶颈时，优先使用实例化和细节层次。
此模板使用 CDN 快速创建独立演示。用于生产环境时，请固定 Three.js 版本。
评论
支持 Markdown