threejs

Plugin threejs from marketplace claude-staff-kit in rajib2k5/claude-staff-kit. Commands read from the repo's manifest — 2 days ago.

Skills (10)

• threejs-animation-system

  Play, blend, and control clip-based animation on a loaded three.js model (AnimationMixer, AnimationClip, AnimationAction), and animate merged/generated geometry that can no longer move as separate objects (morph targets). Use for "play a glTF animation", "AnimationMixer", "animation not advancing",

• threejs-debugging-diagnostics

  Work out systematically why a three.js scene shows nothing — instead of changing values at random until something appears. Trigger on "three.js black screen / nothing renders", "canvas is blank", "object invisible", "scene renders nothing", "shader looks wrong", "GLSL bisect", "NaN in position", "ma

• threejs-gltf-asset-pipeline

  Load a glTF/.glb model into a three.js scene with the right decoders wired first (GLTFLoader, Draco/KTX2/Meshopt), inspect its real hierarchy and bounds before touching transforms, fix the scale/orientation/material problems baked in at export (Blender scale-not-applied, Z-up vs Y-up wrapper nodes,

• threejs-interaction-picking

  Let a user orbit, hover, and click 3D objects in three.js reliably. Covers OrbitControls setup and its update()/dispose() lifecycle; CPU raycasting via pointer-to-NDC conversion and Raycaster.setFromCamera/intersectObjects; GPU picking (an id-encoded pickingScene, camera.setViewOffset, a 1x1 WebGLRe

• threejs-materials-lighting-shadows

  Choose a three.js material (MeshBasic/Lambert/Phong/Standard/Physical), budget texture VRAM, fix washed-out or too-dark colours, and light/shadow a scene at a cost a mid-range phone can hold. Trigger on "which three.js material should I use", "texture memory budget", "colours washed out or too dark"

• threejs-on-web-pages

  Put three.js inline with real page content instead of a single full-bleed canvas — scroll-synced 3D diagram viewports down a long article, a hero canvas behind text, HTML labels pinned to moving 3D points — all on one shared WebGL context. Use for "multiple three.js scenes on one page", "scroll-sync

• threejs-performance-instancing

  Hold a framerate and power budget in three.js on real hardware — collapse thousands of individual meshes into one draw call with BufferGeometryUtils.mergeGeometries, render many movable copies with InstancedMesh (setMatrixAt/setColorAt), author custom BufferGeometry by hand, decide when to render at

• threejs-postprocessing-render-targets

  Add bloom, film grain, custom fullscreen shaders, or render a scene into a texture (mirrors, screens, monitors, building facades) in three.js — without silently breaking colour management. Use for "add bloom / post-processing to three.js", EffectComposer, RenderPass, ShaderPass, OutputPass ordering,

• threejs-scene-setup

  Go from empty HTML to a correctly sized, DPI-aware, colour-managed three.js canvas with a sane scene graph and a render loop that survives resize, mobile and tab-switching. Use for "three.js scene setup", "new THREE.Scene", "WebGLRenderer", blurry canvas, canvas fills the whole page (or doesn't), ca

• threejs-webgpu-tsl

  Decide whether and how to move a three.js project from WebGLRenderer to WebGPURenderer with TSL node materials, and report honestly what breaks on the way. Use for "should I migrate to WebGPURenderer", "three/webgpu" and "three/tsl" imports and importmap entries, "TSL node materials", "WebGPU experi

Similar plugins