Three.js Lab & Studio

Plugin threejs-lab in LumosLab-Innovation/3D-lab-skills. Commands read from the repo's manifest — 1 month ago.

Skills (35)

• khtn8-biology-lab-creator

  Build and review KHTN8 biology 3D labs with dense small-detail visuals, organ systems, ecology scenes, measured variables, accessible controls, and stricter frontend/performance benchmarks.

• learning-lab-3d-creator

  Build complete production-grade 3D educational labs and simulations. Use when creating or refactoring science/physics labs, KHTN8 lessons, experiment scenes, Three.js/Babylon scenes, agent-connected simulation flows, control panels, reports, quizzes, tutorial phases, or reusable lab architecture.

• learning-lab-qa-pm-reviewer

  Strict QA and product-management review gate for 3D learning labs, Three.js models, physics simulations, and educational experiment flows. Use before shipping, merging, presenting, or claiming a 3D lab is done; use when the user asks for a hard QA/PM review, subagent reviewer, acceptance criteria, p

• science-model-director

  Use when planning or reviewing science, KHTN8, biology, chemistry, physics, or simulation labs for conceptual correctness, causal logic, variable-to-visual mapping, simplification risk, and whether each 3D element is necessary for the lesson.

• threejs-art-director

  Use when planning or reviewing Three.js educational labs for visual taste, reference likeness, material polish, composition, readable silhouettes, non-toy aesthetics, and whether biology/chemistry/physics scenes look convincing rather than merely technically complete.

• threejs-atmosphere-aerial-perspective

  Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space transitions, Rayleigh/Mie scattering, precomputed LUTs, depth-based transmittance and inscattering, sun/moon discs, and atmosphere-aware lighting.

• threejs-bloom

  Implement production bloom in advanced Three.js scenes. Use for HDR signal ordering, bloom-node controls, dual selective bloom with guaranteed material restoration, scene-relative emissive hierarchy, and effect-isolation diagnostics.

• threejs-camera-direction

  Direct advanced Three.js camera systems. Use for scale-aware chase rigs, thrust lag, side/orbit cameras, body-relative up vectors, quaternion handoffs, authored cinematic framing, floating origins, pointer-look controls, camera collision constraints, projection ownership, and lifecycle restoration.

• threejs-design-director

  Use when planning or reviewing a Three.js educational lab scene for coherent 3D object design, morphology, composition, reference interpretation, element necessity, camera framing, and avoiding visually wrong or literal-but-illogical model choices.

• threejs-exposure-color-grading

  Build a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted log-average exposure, asymmetric adaptation, single tone-map ownership, and a generated 32-cube post-tone-map LUT.

• threejs-image-pipeline

  Build a deliberate final-image pipeline for advanced Three.js scenes. Use for depth, normal, albedo, and history ownership; GTAO or bent normals; bloom; eye adaptation; tone mapping; 3D LUT grading; effect-local render targets; and pass diagnostics.

• threejs-lab

  Router and baseline workflow for Three.js lab work. Use when the user asks for any web 3D lab, learning simulation, model viewer, Three.js scene, GLB/GLTF asset flow, physics demo, canvas bug, visual QA, or performance pass and a more specific plugin skill may apply.

• threejs-model-creator

  Create, import, refine, and optimize 3D models for Three.js labs. Use for procedural geometry, GLB/GLTF asset loading, model composition, materials, textures, labels, articulated parts, educational apparatus, lab benches, robots, instruments, and visual polish for web 3D.

• threejs-performance-qa

  Verify and optimize Three.js, React Three Fiber, Babylon, and 3D learning labs before shipping. Use for visual QA, blank canvas debugging, WebGL performance, memory cleanup, responsive canvas checks, build/lint verification, Playwright screenshots, canvas pixel checks, GLB asset failures, and releas

• threejs-physics-simulation

  Build calibrated physics and numerical simulations for Three.js or learning labs. Use for forces, motion, collisions, rigid bodies, springs, pendulums, levers, fluids approximations, fields, electricity, density, heat, optics, particles, Babylon/cannon-es physics, timestep logic, units, and determin

• threejs-precipitation-surfaces

  Build coupled precipitation and affected surfaces in Three.js. Use for falling snow, snow accumulation, model snow caps, wet asphalt puddles, procedural ripple normals, splash flipbooks, rain streaks, shared weather envelopes, and surface wetness or coverage transitions.

• threejs-procedural-animation

  Build advanced procedural animation in Three.js. Use for launch kinematics, gravity turns, staging, spin docking, target-frame decomposition, spring-follow motion, rotating-frame alignment, peeling debris, analytic transform timelines, frame-rate-independent response, and quaternion control.

• threejs-procedural-architecture

  Build authored procedural buildings and architectural kits in Three.js. Use for massing grammars, exposed-edge analysis, façade bays, profiles, arches, cornices, roofs, ornaments, material-slot mesh compilation, deterministic variants, and procedural city assets.

• threejs-procedural-fields

  Build coherent procedural scalar and vector fields for Three.js materials and geometry. Use for terrain, planets, wear, biomes, clouds, water masks, displacement, roughness, normals, domain warping, and any visual where several channels must derive from shared causes.

• threejs-procedural-geometry

  Build production procedural mesh systems in Three.js. Use for sculpted rail and frame profiles, oriented branch rings, semantic mesh writers, deliberate skins and caps, UV density, custom normals, material slots, instancing decisions, and close-inspection geometry budgets.

• threejs-procedural-materials

  Author production procedural materials in Three.js. Use for atlas filtering and specular AA, planet-space material fields, terrain wetness, lava and hot emissive procedural surfaces, raymarched material fields, per-instance dissolve, authored PBR identities, derivative normals, and custom direct-lig

• threejs-procedural-planets

  Author procedural planetary bodies in Three.js. Use for spherical terrain, continents, ridges, craters, biome masks, coastlines, material variation, analytic normals, altitude LOD, and bodies that must hold up from orbit through close approach.

• threejs-procedural-vegetation

  Generate authored procedural trees, grass, and vegetation in Three.js. Use for stylized meadow grass, realistic GPU-computed grass, trunks, recursive branches, roots, canopies, leaf cards, species presets, growth forces, trellises, deterministic variation, rooted blade/leaf wind, and wind deformatio

• threejs-procedural-vfx

  Author production real-time VFX in Three.js. Use for ship-conforming reentry plasma, generated capsule wakes, instanced analytic sparks, timed dissolving debris, dense-swap effect pools, and explicit scene-relative HDR emission hierarchy.

• threejs-raymarched-space-effects

  Build raymarched space phenomena in Three.js. Use for black-hole lensing, accretion disks, wormholes, curved-ray integration, procedural star fields, relativistic-looking distortion, bounded volumetric structures, and GPU effects that need controlled numerical integration.

• threejs-screen-space-ambient-occlusion

  Implement a production GTAO path in Three.js. Use for half-resolution horizon sampling, reversed-depth reconstruction, bent-normal encoding, full-resolution bilateral reconstruction, environment-light application, contact grounding, and halo diagnosis.

• threejs-shadow-systems

  Implement stable, scalable directional-shadow systems for Three.js. Use for large procedural worlds, city scenes, terrain, moving cameras, WebGPU/TSL shadow nodes, cascades, cached clipmaps, texel stabilization, update budgets, and targeted invalidation.

• threejs-skill-router

  Route ambitious Three.js graphics work to the smallest expert skill set. Use for new visual experiences, graphics rewrites, reference matching, or requests spanning geometry, materials, atmosphere, shadows, temporal effects, and final image treatment.

• threejs-spectral-ocean

  Build large procedural oceans in Three.js from directional wave spectra. Use for WebGPU/TSL FFT oceans, multi-cascade wavelength bands, hybrid FFT plus Gerstner clear-water oceans, stylized above/below surface ocean optics, choppy displacement, spectral derivatives, Jacobian whitecaps, temporal foam

• threejs-studio

  Create image options, get human approval on localhost, author geometry in Three.js or Blender MCP, then code Three.js motion, contraction and interaction for either model. Use for prompt-to-3D, image-to-model, animated interactive assets or resuming visual approval across coding agents. No paid imag

• threejs-temporal-surfaces

  Build screen-space temporal surface effects in Three.js. Use for full-resolution touch-history ping-pong, frost and thaw masks, reduced-resolution separable blur, static crystalline structure targets, and two-scale normal-map refraction.

• threejs-visual-validation

  Validate advanced Three.js graphics as authored systems rather than subjective screenshots. Use for fixed-view visual contracts, field and pass diagnostics, no-post baselines, seed sweeps, camera-scale tests, temporal stability checks, GPU budgets, and regression evidence for procedural scenes.

• threejs-volumetric-clouds

  Implement volumetric cloud systems in Three.js. Use for weather-driven density, bounded raymarching, shape/detail erosion, vertical profiles, lighting cones, silver lining, temporal reconstruction, cloud shadows, multiple layers, and scalable quality modes.

• threejs-water-optics

  Build production analytic and bounded water in Three.js. Use for shared multi-wave displacement and normals, bounded RGBA heightfield pool simulation, local drops, object-driven ripples, differential-area caustics, ray-traced pool/water/sphere volume optics, derivative-filtered normal bands, analyti

• visual-lab-qa-agent

  Use when creating, improving, or accepting polished 3D learning labs where visual quality, GPT Image/imagegen concept references, benchmark screenshot comparison, chemistry/biology detail, or before-and-after demo QA loops matter.

Hooks (1)

• UserPromptSubmit

  node "${CLAUDE_PLUGIN_ROOT}/hooks/threejs-lab-router.js"; exit 0

Similar plugins