webgl-3d-object

What problem does it solve?

This Skill helps you create a faceted, product-like 3D object with real depth, lighting, and highlights so your landing pages and hero sections look “designed” rather than like flat CSS illusions.

Core Features & Use Cases

• Real geometry: Use procedural meshes (e.g., IcosahedronGeometry) or imported geometry for visible form and edges.
• PBR materials: Apply MeshStandardMaterial or MeshPhysicalMaterial with tuned metalness, roughness, and emissive for brand mood.
• Cinematic lighting: Combine directional light with ambient/hemisphere-style fill and optionally rim lighting.
• Perspective + subtle motion: Use a perspective camera and animate only rotation and gentle floating/bobbing for premium motion.
• Production readiness: Handle resize correctly and dispose renderer, geometry, and materials on teardown.

Quick Start

Use the webgl-3d-object skill to implement a Three.js-powered WebGL canvas for your faceted 3D hero inside an aspect-ratio container, with directional + ambient lighting and subtle floating rotation.