angular-3d-scene-crafter

Generates Angular components for Three.js 3D scenes using the @hive-academy/angular-3d library.

Updated Jun 14, 2026
One-click install
npx skills add https://github.com/ironkid90-s/lucky5-v7 --skill angular-3d-scene-crafter-ironkid90-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-3d-scene-crafter
Source: https://github.com/ironkid90-s/lucky5-v7/tree/main/.ptah/skills/angular-3d-scene-crafter
Command: npx skills add https://github.com/ironkid90-s/lucky5-v7 --skill angular-3d-scene-crafter-ironkid90-s

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @hive-academy/angular-3d, and includes references (resource) and assets (resource) components.

What problem does it solve? Designing interactive 3D scenes in Angular requires deep knowledge of Three.js primitives, materials, lighting, and post-processing, which slows down developers who just want a polished hero section or visual effect. ## Core Features & Use Cases - Guided Scene Design: Conversational workflow that recommends primitives, lighting setups, materials, and effects based on the desired aesthetic (cyberpunk, cosmic, glass, geometric, particle, organic). - Image-Based Reverse Engineering: Analyzes a reference screenshot to extract colors, lighting, materials, and composition, then generates matching Angular scene code. - Ready-to-Use Templates: Six production-ready scene components (neon grid, floating geometry, bubble dream, space cosmic, metaball organic, particle storm) with documented customization points. - Use Case: A developer needs a dreamy glass-bubble hero section for a landing page; the skill matches the Bubble Dream pattern, generates the complete standalone Angular component with transmission materials, three-point lighting, and bloom, then suggests tweaks. ## Quick Start Ask the assistant to create a cyberpunk neon 3D hero scene for your Angular app using the angular-3d library.

Frequently Asked Questions about angular-3d-scene-crafter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a 3D hero section in Angular with Three.js?▼

Use the @hive-academy/angular-3d library's declarative components like a3d-scene-3d, primitives, lights, and effect composers inside a standalone Angular component. This skill guides you through picking a scene pattern and generates the complete component code.

How to recreate a 3D scene from a reference image in Angular?▼

Provide the reference image and the skill analyzes its color palette, lighting setup, materials, geometry, and effects. It then maps those findings to angular-3d components and generates a matching Angular scene component with customization notes.

What scene templates are available for angular-3d?▼

Six templates ship in the assets folder: crystal-grid-neon, floating-geometry, bubble-dream-hero, space-cosmic-hero, metaball-organic, and particle-storm. Each is a documented, production-ready Angular component you copy and customize.

Does angular-3d support glass and iridescent materials?▼

Yes, primitives support transmission, thickness, ior, clearcoat, and iridescence inputs for glass and soap-bubble effects. An environment map via a3d-environment is required for realistic reflections and refraction.

Why does my 3D scene perform poorly on mobile?▼

High segment counts, large particle counts, enabled shadows, and glow effects hurt performance. Use 16-32 segments on mobile, keep particles under 1000, disable shadows, and avoid enableGlow on star fields.