threejs-skills
使用 Three.js 创建 3D 图形和交互式场景
构建 3D Web 体验需要了解场景设置、光照和渲染模式。本技能提供系统的 Three.js 模式，用于创建高性能的交互式 3D 内容。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“threejs-skills”。 创建一个 3D 场景，包含一个旋转的球体，点击时改变颜色
预期结果:
- 完整的 HTML 文件，包含 Three.js r128 CDN 导入
- 场景初始化，相机定位在 z=5
- SphereGeometry 使用 32 段以获得平滑外观
- MeshStandardMaterial 带初始颜色
- 环境光和方向光设置
- 动画循环使球体绕 x 轴和 y 轴旋转
- 射线检测实现点击检测
- 事件监听器在相交时更改材质颜色
- 响应式画布的窗口大小调整处理程序
正在使用“threejs-skills”。 构建一个流向相机的粒子场
预期结果:
- 使用 Float32Array 的 BufferGeometry 包含 2000 个粒子
- 随机初始位置分布在 3D 空间中
- PointsMaterial 使用白色和大小 0.02
- 动画循环每帧更新 z 位置
- 当粒子穿过相机阈值时重置位置
- 用于清理的正确 dispose 模式
- 流畅的 60fps 性能优化
安全审计
安全This skill contains documentation-only content (SKILL.md) teaching Three.js 3D graphics development. All 82 static analysis findings are false positives: backtick characters are Markdown code block delimiters, not shell execution; URLs are CDN resource references for the Three.js library; cryptographic warnings are pattern mismatches on version numbers and documentation text. No executable code, no network calls, no command injection vectors exist in this educational content.
质量评分
你能构建什么
交互式产品展示
创建 3D 产品展示，用户可以直接在浏览器中旋转、缩放和探索产品。
数据可视化仪表盘
将复杂数据集转换为沉浸式 3D 图表、图形和空间表示。
教育 3D 内容
构建交互式模型，用于教授解剖学、天文学、建筑学或工程学概念。
试试这些提示
Create a basic Three.js scene with a rotating cube. Include scene setup, camera, renderer with antialiasing, a colored cube geometry, lighting, and an animation loop. Add window resize handling.
Build an interactive 3D sphere that responds to mouse movement. Implement custom camera controls (drag to rotate, scroll to zoom) without OrbitControls. Use MeshStandardMaterial with proper lighting.
Generate a particle system with 1000+ particles using BufferGeometry. Add animation so particles move or rotate over time. Include proper performance practices like geometry and material disposal.
Implement raycasting to detect mouse clicks and hovers on 3D objects. When hovering, scale the object and change cursor style. When clicking, change the object color. Include an array of clickable objects.
最佳实践
- 始终使用 Three.js r128 CDN 以确保工件兼容性，并验证功能可用性
- 添加窗口大小调整处理程序以更新相机宽高比和渲染器尺寸
- 移除对象时 disposing 几何体、材质和纹理以防止内存泄漏
避免
- 使用 OrbitControls 或 addon 导入，这些在 r128 CDN 上不可用
- 使用 CapsuleGeometry，这需要 r142 或更高版本
- 使用 MeshStandardMaterial 等光照材质时忘记添加灯光