Iván

Three.js

開發程式設計v1.0.0
作者:Iván更新於 2026-05-11threejs@clawhub_ivangdavila/threejs
前端開發

據 AlphaMoat 統計,截至 2026-09,Three.js 累計下載 3,755 次、獲 6 個星標,在全部 5,078 個 AI 技能中排名第 2,838 位,在「開發程式設計」分類(577 個)中排名第 369 位。

累計安裝
146
累計下載
3755
星標
6
全站排名
#2,838
全站前 56% · 「開發程式設計」前 64%
平台累計安裝累計下載星標評論
ClawHub ↗9534196-
SkillHub ↗14637556—

各平台的計數口徑不同,統計時間不一致。

這個技能是做什麼的

整合程式碼前應檢查依賴選擇、第三方資源來源及幾何體、材質和紋理的顯式釋放方式;具體實現還需結合專案的打包器和資源配置複核。 來源列出 node 依賴,程式碼應結合所用 Three.js 版本核驗。

資料釋出於 2026-10-29

可以用來做什麼

  • 檢查物件移除前的 GPU 資源清理流程
  • 使用 renderer 動畫迴圈和基於時間差的動畫更新
  • 核對視窗尺寸變化後的相機投影與渲染器尺寸
  • 分析靜態幾何合併或 InstancedMesh 等效能方案

什麼時候用

  • 正在構建或審查 Three.js Web 3D 場景時
  • 有專案環境資訊以驗證 addon 匯入路徑和資源來源時
  • 合併程式碼前可以審查清理邏輯與依賴時

示例提示詞

以下是根據技能文件生成的示例,不代表實際執行結果。

審查一個 Three.js 場景的資源釋放、渲染迴圈和視窗縮放處理,並指出需要結合專案環境驗證的依賴或資源項;不要虛構專案設定。

月度資料趨勢

累計下載3755
1623276839132026-03 · 累計下載 17812026-05 · 累計下載 23752026-06 · 累計下載 25682026-07 · 累計下載 30322026-08 · 累計下載 32522026-09 · 累計下載 375526-0326-09
星標6
5672026-03 · 星標 62026-05 · 星標 62026-06 · 星標 62026-07 · 星標 62026-08 · 星標 62026-09 · 星標 626-0326-09

2026-09 起統計方法調整:同名技能按作者分別統計,並覆蓋全部技能。圖中虛線為調整前的月份,與之後的資料不直接比較,也不計算跨越調整的增長。

月份累計下載環比星標
2026-093755—6
2026-083252+7.3%6
2026-073032+18.1%6
2026-062568+8.1%6
2026-052375—6
2026-031781—6

SKILL.md 原文

以下是作者釋出的原始檔案,按純文字顯示,本站未做修改或稽核;其中的連結不可點選,命令請核實後再執行。抓取於 2026-10-23。

3.4 KB · ClawHub v1.0.0
---
name: Three.js
description: Build 3D web experiences with proper resource management and performance patterns.
metadata: {"clawdbot":{"emoji":"🎮","requires":{"bins":["node"]},"os":["linux","darwin","win32"]}}
---

# Three.js Production Patterns

## Resource Cleanup
- Call `.dispose()` on geometries, materials, and textures before removing objects — Three.js never garbage collects GPU resources automatically
展開全部(共 51 行)
- When removing a mesh: `mesh.geometry.dispose(); mesh.material.dispose(); scene.remove(mesh)` — missing any step causes memory leaks
- Textures loaded via TextureLoader stay in GPU memory forever unless explicitly disposed — track and clean up on scene transitions

## Render Loop
- Always use `renderer.setAnimationLoop(animate)` instead of manual `requestAnimationFrame` — it handles VR, pauses when tab is hidden, and provides proper timing
- For animations, use `clock.getDelta()` for frame-independent movement — raw frame counting breaks on different refresh rates

## Responsive Canvas
- On window resize, update both camera aspect AND renderer size: `camera.aspect = width/height; camera.updateProjectionMatrix(); renderer.setSize(width, height)`
- Missing `updateProjectionMatrix()` after aspect change causes stretched/squished rendering
- Use `renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))` — values above 2 kill performance with minimal visual benefit

## Imports and Setup
- OrbitControls and other addons: `import { OrbitControls } from 'three/addons/controls/OrbitControls.js'` — the path varies by bundler, check your setup
- Always set `controls.enableDamping = true` with OrbitControls and call `controls.update()` in render loop — without this, damping silently fails

## Lighting
- MeshBasicMaterial ignores all lights — use MeshStandardMaterial or MeshPhongMaterial for lit scenes
- Add ambient light (`new THREE.AmbientLight(0xffffff, 0.5)`) as baseline — scenes with only directional lights have pitch-black shadows
- HDR environment maps via PMREMGenerator give far better reflections than point lights on metallic materials

## Loading Assets
- GLTFLoader is the standard for 3D models — use Draco compression for large meshes (add DRACOLoader)
- Texture loading is async — models may render black until textures load; use LoadingManager for loading screens
- CORS blocks textures from other domains — host assets on same origin or configure proper CORS headers

## Camera Issues
- Default near/far planes (0.1 to 1000) cause z-fighting on large scenes — adjust to smallest range that fits your scene
- Camera inside an object renders nothing — check position after loading external models (they may have unexpected transforms)
- PerspectiveCamera FOV is vertical, not horizontal — 75 degrees is a common default

## Performance
- Merge static geometries with `BufferGeometryUtils.mergeBufferGeometries()` — each mesh is a draw call, fewer meshes = faster
- Use `InstancedMesh` for many identical objects — hundreds of draw calls become one
- Set `object.frustumCulled = true` (default) but verify large objects aren't disappearing at edges — bounding sphere may be wrong
- Call `renderer.info` to debug draw calls, triangles, and textures in memory

## Animation
- AnimationMixer requires `mixer.update(delta)` every frame with actual delta time — passing 0 or skipping frames breaks animations
- Skinned meshes (characters) need `SkeletonHelper` during development to debug bone issues

「開發程式設計」分類下的熱門技能

Iván 的其他技能

資料月份:2026-09 · 下載/星標/安裝數聚合自公開技能註冊庫(ClawHub、SkillHub),按月更新。口徑說明見資料方法。