Pro 3D Workspace

A Claude Code skill for creating and managing 3D content, scenes, and assets within development workflows. Covers 3D modeling concepts, scene composition, Three.js and WebGL integration, asset pipeline management, and rendering optimization for web-based 3D experiences.

When to Use This Skill

Choose Pro 3D Workspace when:

• You're building web-based 3D experiences with Three.js or Babylon.js
• You need to set up a 3D asset pipeline for a web application
• You want to optimize 3D rendering performance in the browser
• You're creating interactive 3D product configurators or visualizations
• You need to work with 3D file formats (glTF, OBJ, FBX) in a web context

Consider alternatives when:

• You need 2D image editing or manipulation (use an image editor skill)
• You want canvas-based 2D drawing (use a canvas module skill)
• You need video editing or generation (use a video generation skill)

Quick Start

Copy
# Install the skill
claude install pro-3d-workspace

# Set up a Three.js project
claude "Set up a Three.js scene with orbit controls, lighting, and a loaded glTF model"

# Optimize 3D performance
claude "My Three.js scene with 50 objects runs at 15fps on mobile. How do I optimize it to 60fps?"

# Build a product configurator
claude "Create an interactive 3D product configurator where users can change colors and materials on a shoe model"

Core Concepts

3D Web Technology Stack

Technology	Use Case	Performance
Three.js	General-purpose 3D rendering	Good, wide ecosystem
React Three Fiber	Three.js with React component model	Good, declarative
Babylon.js	Game-like 3D applications	Excellent, built-in physics
WebGPU	Next-gen GPU access	Best (emerging standard)
A-Frame	VR/AR web experiences	Good for VR, easy setup

Scene Composition

Scene Graph:
├── Camera (PerspectiveCamera)
│   └── Controls (OrbitControls / FlyControls)
├── Lighting
│   ├── AmbientLight (base illumination)
│   ├── DirectionalLight (sun-like shadows)
│   └── PointLight (local highlights)
├── Environment
│   ├── Skybox / HDR environment map
│   └── Ground plane with shadows
└── Objects
    ├── Meshes (geometry + material)
    ├── Groups (logical collections)
    └── Instanced meshes (repeated objects)

Asset Pipeline

Stage	Tool	Output
Modeling	Blender, Maya, 3ds Max	Source files (.blend, .ma)
Export	glTF exporter	.glb / .gltf files
Optimization	gltf-transform, Draco compression	Compressed assets
Loading	GLTFLoader with loading manager	Scene-ready meshes
Runtime	LOD system, frustum culling	Optimized rendering

Configuration

Parameter	Type	Default	Description
renderer	string	"threejs"	Renderer: threejs, r3f, babylonjs, aframe
framework	string	"react"	Frontend framework: react, vue, vanilla
target_fps	number	60	Target frame rate
mobile_support	boolean	true	Include mobile optimization guidance
asset_format	string	"gltf"	Primary asset format: gltf, obj, fbx

Best Practices

1. Use glTF as your primary format — glTF is the "JPEG of 3D" — compact, widely supported, and optimized for web delivery. Use Draco compression for meshes and KTX2 for textures to reduce file sizes by 60-80%.

2. Implement LOD (Level of Detail) — Show high-detail models when close to the camera and simplified versions when far away. This single optimization can improve frame rates by 2-3x in scenes with many objects.

3. Batch draw calls — Each material and mesh creates a draw call. Merge geometries that share materials, use instanced rendering for repeated objects, and keep unique materials under 20 for mobile targets.

4. Lazy load 3D assets — Don't load all 3D content on page load. Show a lightweight preview or skeleton, then progressively load high-quality assets. Use a loading manager to show progress.

5. Test on real mobile devices — Mobile GPUs are 5-10x less powerful than desktop. Test on mid-range Android devices (not just iPhones) and ensure you have a fallback for devices that can't handle 3D rendering.

Common Issues

Low frame rate on mobile — Reduce polygon counts, limit texture sizes to 1024x1024, use simpler shaders (MeshBasicMaterial instead of MeshStandardMaterial where lighting isn't critical), and disable shadows on mobile.

Models appear black or have wrong materials — Usually a lighting issue. Ensure you have both ambient light and at least one directional light. Check that the model's materials were exported correctly and that texture paths resolve properly.

Large file sizes for 3D assets — Compress meshes with Draco, textures with KTX2/Basis Universal, and use quantization in gltf-transform. A 50MB raw glTF can often be reduced to 2-5MB with proper optimization.