Communitygithub.com

cloudai-x/threejs-animation

Three.js动画 - 关键帧动画、骨骼动画、变形目标、动画混合。用于对象动画、播放GLTF动画、创建程序化运动或混合动画。

threejs-animation 是什么?

该技能基于Three.js动画系统,提供关键帧动画、骨骼动画、形态变形目标和动画混合等核心功能。适用于Web开发者需要在Three.js场景中实现对象动画、播放外部GLTF模型动画、创建程序化运动逻辑或平滑混合多个动画状态。支持所有主流Three.js平台(包括Web、React Three Fiber等),通过直接调用Three.js核心API(如AnimationMixer、AnimationClip、KeyframeTrack等)实现。使用时需确保场景已包含加载的模型或对象,技能会自动识别动画绑定关系并执行调度。典型应用包括角色行走循环、物体弹跳、相机路径动画、表情变形等场景。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cloudai-x/threejs-skills/tree/main/skills/threejs-animation

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

threejs-animation 是做什么的?

Three.js动画 - 关键帧动画、骨骼动画、变形目标、动画混合。用于对象动画、播放GLTF动画、创建程序化运动或混合动画。

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

cloudai-x/threejs-fundamentals

Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.

cloudai-x/threejs-geometry

Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.

cloudai-x/threejs-interaction

Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.

cloudai-x/threejs-lighting

Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.

cloudai-x/threejs-loaders

Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.

cloudai-x/threejs-materials

Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.

cloudai-x/threejs-postprocessing

Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.

cloudai-x/threejs-shaders

Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.

cloudai-x/threejs-textures

Three.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.

相关技能