---
name: angular-3d-scene-crafter
description: 'Designs Angular 3D scenes with @hive-academy/angular-3d (declarative Three.js components). Use for 3D hero sections, neon, space, glass or particle effects, primitives, lighting and materials, or recreating a scene from a reference image.'
---

# Angular 3D Scene Crafter

## Rules

- Before generating scene code, check the project's `package.json` for `@hive-academy/angular-3d`; install it or confirm the intended version if absent.
- For a reference image, map observed color, lighting, material, geometry, depth, and effects to components before building the scene.
- For a written brief, choose a scene composition and build camera, objects, materials, lights, motion, and effects incrementally before presenting the complete Angular component.
- Use existing scene assets as opt-in starting drafts; adapt their documented values to the user's design.

## Load on demand

- [Image workflow](references/image-workflow.md): load when recreating a reference image or screenshot.
- [Text workflow](references/text-workflow.md): load when the user describes a scene without a reference image.
- [Scene templates](references/templates.md): load when a ready-to-use scene asset matches the requested aesthetic.
- [Component catalog](references/components.md): load when selecting primitives, directives, services, or exact inputs.
- [Composition patterns](references/patterns.md): load when choosing or combining scene layouts.
- [Best practices](references/best-practices.md): load when tuning colors, materials, lights, animation, or effects.