threejs-skills
使用 Three.js 建立 3D 圖形與互動場景
建立 3D 網頁體驗需要理解場景設定、光照與渲染模式。此技能提供系統化的 Three.js 模式，用於建立高效能的互動式 3D 內容。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "threejs-skills". 建立一個包含旋轉球體的 3D 場景，點擊時變更顏色
Résultat attendu:
- 完整 HTML 檔案，使用 Three.js r128 CDN 匯入
- 場景初始化，相機位於 z=5
- SphereGeometry 包含 32 分段以呈現平滑外觀
- MeshStandardMaterial 設定初始顏色
- 環境光與方向光設定
- 動畫迴圈在 x 與 y 軸上旋轉球體
- 射線偵測實作用於點擊偵測
- 事件監聽器在相交時變更材質顏色
- 視窗縮放處理器用於響應式畫布
Utilisation de "threejs-skills". 建立一個流向相機的粒子場域
Résultat attendu:
- BufferGeometry 包含 2000 粒子，使用 Float32Array
- 隨機初始位置散佈於 3D 空間
- PointsMaterial 設定白色與大小 0.02
- 動畫迴圈每幀更新 z 座標
- 粒子通過相機閾值時重置位置
- 適當的 dispose 模式用於清理
- 流暢的 60fps 效能最佳化
Audit de sécurité
SûrThis 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.
Score de qualité
Ce que vous pouvez construire
互動式產品視覺化
建立 3D 產品展示，讓使用者可直接在瀏覽器中旋轉、縮放與探索。
資料視覺化儀表板
將複雜資料集轉化為沉浸式的 3D 圖表、圖形與空間呈現。
教育性 3D 內容
建構互動式模型，用於教學解剖學、天文學、建築學或工程概念。
Essayez ces prompts
建立一個基本 Three.js 場景，包含旋轉的��方體。包含場景設定、相機、具反鋸齒的渲染器、彩色立方體幾何、光源與動畫迴圈。加入視窗縮放處理。
建立一個對應滑鼠移動的互動式 3D 球體。實作自訂相機控制（拖曳旋轉、捲動縮放），不使用 OrbitControls。使用 MeshStandardMaterial 搭配適當光源。
使用 BufferGeometry 產生包含 1000+ 粒子的粒子系統。加入動畫讓粒子隨時間移動或旋轉。包含幾何與材質釋放等效能最佳化實作。
實作射線偵測以識別 3D 物件上的滑鼠點擊與悬停。悬停時縮放物件並變更游標樣式。點擊時變更物件顏色。包含可點擊物件陣列。
Bonnes pratiques
- 始終使用 Three.js r128 CDN 以確保 artifact 相容性，並驗證功能可用性
- 加入視窗縮放處理器以更新相機長寬比與渲染器尺寸
- 移除物件時釋放幾何、材質與貼圖，以防止記憶體洩漏
Éviter
- 使用 OrbitControls 或無法在 r128 CDN 取得的附加元件匯入
- 使用需要 r142 ���更新版本的 CapsuleGeometry
- 使用 MeshStandardMaterial 等需光材質時忘記加入光源