threejs-skills
使用 Three.js 建立 3D 圖形與互動場景
建立 3D 網頁體驗需要理解場景設定、光照與渲染模式。此技能提供系統化的 Three.js 模式，用於建立高效能的互動式 3D 內容。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「threejs-skills」。 建立一個包含旋轉球體的 3D 場景，點擊時變更顏色
預期結果:
- 完整 HTML 檔案，使用 Three.js r128 CDN 匯入
- 場景初始化，相機位於 z=5
- SphereGeometry 包含 32 分段以呈現平滑外觀
- MeshStandardMaterial 設定初始顏色
- 環境光與方向光設定
- 動畫迴圈在 x 與 y 軸上旋轉球體
- 射線偵測實作用於點擊偵測
- 事件監聽器在相交時變更材質顏色
- 視窗縮放處理器用於響應式畫布
正在使用「threejs-skills」。 建立一個流向相機的粒子場域
預期結果:
- BufferGeometry 包含 2000 粒子，使用 Float32Array
- 隨機初始位置散佈於 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 內容
建構互動式模型，用於教學解剖學、天文學、建築學或工程概念。
試試這些提示
建立一個基本 Three.js 場景，包含旋轉的��方體。包含場景設定、相機、具反鋸齒的渲染器、彩色立方體幾何、光源與動畫迴圈。加入視窗縮放處理。
建立一個對應滑鼠移動的互動式 3D 球體。實作自訂相機控制（拖曳旋轉、捲動縮放），不使用 OrbitControls。使用 MeshStandardMaterial 搭配適當光源。
使用 BufferGeometry 產生包含 1000+ 粒子的粒子系統。加入動畫讓粒子隨時間移動或旋轉。包含幾何與材質釋放等效能最佳化實作。
實作射線偵測以識別 3D 物件上的滑鼠點擊與悬停。悬停時縮放物件並變更游標樣式。點擊時變更物件顏色。包含可點擊物件陣列。
最佳實務
- 始終使用 Three.js r128 CDN 以確保 artifact 相容性，並驗證功能可用性
- 加入視窗縮放處理器以更新相機長寬比與渲染器尺寸
- 移除物件時釋放幾何、材質與貼圖，以防止記憶體洩漏
避免
- 使用 OrbitControls 或無法在 r128 CDN 取得的附加元件匯入
- 使用需要 r142 ���更新版本的 CapsuleGeometry
- 使用 MeshStandardMaterial 等需光材質時忘記加入光源