Three.js 技能合集

通过专项接口与实现指导制作交互式三维场景。

CloudAI-X 的技能库涵盖基础、几何、材质、纹理、灯光、加载、动画、交互、着色器和后处理。

适用场景

  • 构建三维场景并添加动画
  • 加入交互、材质和视觉效果

使用方法

安装完整技能目录并提供场景要求与应用代码,按领域选择技能,并结合项目的 Three.js 版本验证。

Skills

  • threejs-animation

    Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.

    cloudai-x/threejs-skills
  • 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-skills
  • 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-skills
  • 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-skills
  • 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-skills
  • 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-skills
  • 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-skills
  • 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-skills
  • 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-skills
  • 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.

    cloudai-x/threejs-skills