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
累计下载
3,755
星标
6
全站排名
#2,838
全站前 56% · 「开发编程」前 64%
平台累计安装累计下载星标评论
ClawHub ↗953,4196-
SkillHub ↗1463,7556—

各平台的计数口径不同,统计时间不一致。

这个技能是做什么的

集成代码前应检查依赖选择、第三方资源来源及几何体、材质和纹理的显式释放方式;具体实现还需结合项目的打包器和资源配置复核。 来源列出 node 依赖,代码应结合所用 Three.js 版本核验。

资料发布于 2026-10-29

可以用来做什么

  • 检查对象移除前的 GPU 资源清理流程
  • 使用 renderer 动画循环和基于时间差的动画更新
  • 核对窗口尺寸变化后的相机投影与渲染器尺寸
  • 分析静态几何合并或 InstancedMesh 等性能方案

什么时候用

  • 正在构建或审查 Three.js Web 3D 场景时
  • 有项目环境信息以验证 addon 导入路径和资源来源时
  • 合并代码前可以审查清理逻辑与依赖时

示例提示词

以下是根据技能文档生成的示例,不代表实际运行结果。

审查一个 Three.js 场景的资源释放、渲染循环和窗口缩放处理,并指出需要结合项目环境验证的依赖或资源项;不要虚构项目设置。

月度数据趋势

累计下载3,755
1,6232,7683,9132026-03 · 累计下载 1,7812026-05 · 累计下载 2,3752026-06 · 累计下载 2,5682026-07 · 累计下载 3,0322026-08 · 累计下载 3,2522026-09 · 累计下载 3,75526-0326-09
星标6
5672026-03 · 星标 62026-05 · 星标 62026-06 · 星标 62026-07 · 星标 62026-08 · 星标 62026-09 · 星标 626-0326-09

2026-09 起统计方法调整:同名技能按作者分别统计,并覆盖全部技能。图中虚线为调整前的月份,与之后的数据不直接比较,也不计算跨越调整的增长。

月份累计下载环比星标
2026-093,755—6
2026-083,252+7.3%6
2026-073,032+18.1%6
2026-062,568+8.1%6
2026-052,375—6
2026-031,781—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),按月更新。口径说明见数据方法。