screen2code v1.1.00: The 3D Studio Is Here

When we launched screen2code, the goal was clear: make the gap between a design and working component code as small as possible. For 2D components: buttons, cards, layouts, forms, that loop is tight. You describe something or upload an image, and within seconds you have clean Svelte 5 and React code running side by side in a live preview.

v1.1.00 extends that loop into three dimensions.

The 3D Studio is now live. It generates production-ready React Three Fiber and Threlte scene code simultaneously, from text descriptions, reference images, or real .glb model files. The same generate-and-refine philosophy that drives the 2D studio now applies to 3D, with an interactive preview, parametric controls, and full session history.

Why Dual-Framework 3D Output

The 2D studio generates Svelte 5 and React in parallel because framework choice is a real constraint for teams. The same logic applies to 3D.

React Three Fiber owns a large slice of the 3D web ecosystem. Its declarative approach to Three.js, combined with the Drei helper library, makes it the default starting point for most React developers venturing into WebGL. Threlte brings the same energy to Svelte: a Svelte-native, component-first way to author Three.js scenes without losing the framework ergonomics you already know.

Choosing between them is not always obvious upfront. Seeing both outputs from the same prompt side by side makes the decision concrete. You can compare how the same scene translates across frameworks, pick the one that fits your stack, and download clean, framework-idiomatic code without a rebuild.

Three Ways to Generate a Scene

From text. Describe what you want. A spinning chrome sphere on a dark background. A low-poly terrain with fog. A product display box with soft studio lighting. The AI returns both R3F and Threlte components, rendered live in the preview. Note: text-to-3D is still a developing area. Outputs are straightforward and getting better rapidly, but complex scenes may need refinement.

From an image. Upload a screenshot, concept art, or reference photo (best results with images under 1MB). The AI reads the visual and translates what it sees into 3D scene code. This workflow works best for compact subjects like product icons and small UI elements. Same dual-framework output.

From a .glb model. This is where things get more interesting. Upload a real binary glTF asset and the AI inspects its internal structure (meshes, named parts, materials, embedded animations) to generate wrapper code that loads and displays your model correctly in both frameworks. The MODEL_URL placeholder in generated code is substituted with a local object URL automatically, so the preview renders immediately without any manual patching.

All three inputs feed into the same output pipeline: clean R3F and Threlte components, live preview, iteration history.

An Interactive Preview That Respects the Work

Static code output is one thing. Seeing your scene move is another.

Both the R3F and Threlte previews support interactive orbit controls out of the box. You can click and drag to inspect any angle, no extra code required. Beyond orbit, the preview toolbar exposes a set of scene controls that apply instantly to both previews:

  • Auto-rotation with selectable direction (CW, CCW, off) and axis (X, Y, or Z)
  • Wireframe mode for mesh structure inspection
  • Background toggle between dark and light scene backdrops
  • Camera reset to snap back to the default datum view
  • Zoom from 25% to 200% for precision inspection of fine detail

These controls are not model-specific. They work on every generated scene, whether you typed a prompt or uploaded a GLB.

Parametric Controls: Adjust Without Touching Code

When the AI processes a .glb model, it extracts structured metadata about the asset: named parts, materials, scale constraints, and animation tracks. That metadata powers the Parametric Strip, a live control panel that sits alongside the preview.

From the Parametric Strip you can:

  • Scale the model within defined bounds using a slider
  • Toggle individual named mesh parts on or off
  • Change material colors using color pickers, reflected live in the preview
  • Play, pause, and adjust the speed of named animations
  • Switch between 10 HDRI environment presets (sunset, dawn, night, warehouse, forest, city, studio, park, outdoor, lobby) all sourced from Poly Haven and mapped consistently across both frameworks

Every change in the Parametric Strip happens in real time. You are not editing code to preview a color. You are editing parameters, and the code stays synchronized in the background.

Framework Conversion

Already generated a scene in R3F but your project runs on Threlte? One click converts it. The same works in reverse. Framework conversion is AI-powered and structure-aware. It adapts component APIs, import paths, and Svelte-specific syntax while preserving your scene logic.

This is the same conversion philosophy from the 2D studio applied to 3D: you should never be locked into the framework you happened to generate in first.

Sessions, Iteration History, and Sharing

3D sessions are managed separately from 2D sessions. Every generation is saved as an iteration, and the full iteration chain (including the prompts that produced each version) is stored in session history. You can step backwards to any prior version, branch off in a new direction, or bookmark specific iterations to return to later.

Sessions are shareable. Generate a scene, save it, and send a link to a teammate. They get a read-only view of your session and can inspect both framework outputs without needing an account.

Access and Pricing

3D Studio access depends on your plan.

The Pro plan ($15/month or $144/year) includes 5 3D generations per month — enough to explore the dual-framework pipeline and run real experiments. Side-by-side preview, framework conversion, and session saving are all included.

The Studio plan ($39/month or $374/year) is built for teams and power users. It raises the limit to 100 3D generations per month and unlocks the full GLB pipeline: upload real models, get parametric controls auto-wired, access all 10 HDRI presets, and use the Parametric Strip to iterate visually without touching code.

Both plans include 5 saved sessions for 3D work, independent of 2D session limits. Annual billing saves 20% on either plan.

Trial users get full access to the 2D studio. 3D generation is a Pro-and-above feature.

What Comes Next

The 3D Studio is v1.1.00. The foundation is in place: dual-framework generation, live interactive preview, parametric controls, sessions, and sharing. From here, the roadmap follows the same principle that drives everything else we build: quality and usefulness over surface area.

Closer Figma integration is in progress. The Figma plugin currently extracts designs into 2D components; connecting that output into 3D workflows is a natural next step. We also want to deepen the parametric system — giving generated-code scenes (not just GLB uploads) a similar set of live controls.

If you have been waiting for a faster path from concept to 3D scene code, v1.1.00 is the starting point. Try it in the studio, run some generations, and tell us what the rough edges are.

We read every message at support@screen2code.dev and use the feedback to decide what to fix first.