# 3D Room Designer

- Author: @alwayspriyesh
- Card: Creator prompt
- Theme: Cities & architecture
- Stack: Not rebuilt
- Interaction: Pointer
- Licence: Credited link (Shared publicly by the author; full text with credit, removed on request)
- Verified: not yet
- Original post: https://x.com/alwayspriyesh/status/2110243620737745008

## Original prompt

```text
Try the live demo yourself:
https://sites.google.com/view/priy-gemini-argon-test/full-page-embed

Here's the exact prompt I used to build it in Gemini. One prompt, one HTML file, no backend.

Build a Beautiful Interactive 3D Room Designer in One HTML File

Act as a senior frontend engineer, 3D graphics developer, and product designer. Build a complete, polished, interactive room-design experience that runs directly in a web browser.

I want to test your ability to produce excellent visual design, realistic-looking 3D scenes, working interactions, thoughtful animations, and clean frontend code in a single attempt.

Do not build a generic dashboard or a static landing page. Build a small, usable product that feels like a real interior-design application.

1. The concept

Create an interactive application called ROOM STUDIO.

The user should be able to explore and redesign a beautiful contemporary living room. The room should feel warm, calm, and thoughtfully designed, like an interior photographed for a high-end architecture magazine.

The scene should contain a comfortable sofa, coffee table, rug, indoor plants, floor lamp, wall art, low cabinet, large window, curtains, and natural wooden flooring.

The user must be able to rotate the view, select furniture, move objects, change materials, experiment with lighting, and switch between different design styles.

The finished result should feel like a small premium software product, not a coding exercise.

2. Visual direction

Use a natural, editorial interior-design aesthetic inspired by contemporary Japanese and Scandinavian interiors.

The visual style should be:

Warm oak wood, cream walls, linen fabrics, muted sage green, soft beige, and earthy brown.

Soft natural sunlight entering through a large window.

Believable contact shadows, ambient occlusion-like depth, and layered lighting.
Rounded furniture edges, realistic-looking cushions, subtle material texture, and well-proportioned furniture.
A restrained interface with clean typography, fine borders, generous spacing, and minimal icons.
A balanced mix of warm natural colors and neutral interface colors.
Avoid the typical AI-generated website look.
Do not use neon colors, excessive glassmorphism, glowing borders, giant rounded cards, unnecessary gradients, random decorative elements, or excessive animations.

Avoid making the furniture look like simple colored cubes. Use carefully proportioned geometry, rounded edges, layered shapes, and subtle surface details to make the objects recognizable and visually convincing.

3. The 3D room

Use Three.js through a reliable CDN if needed. Keep the entire application in one HTML file, including the CSS and JavaScript.

Create the entire room procedurally in code. Do not depend on remote images, downloaded 3D models, external textures, API keys, or backend services.

The room should have:

A wooden floor with visible plank variation or a subtle procedural wood texture.

Two or three visible walls arranged to create an open, cutaway room.

A large window with a frame, glass, and curtains.
A sofa with a seat, back cushions, and arms.
A coffee table with a tabletop and legs.
A rug underneath or near the seating area.
At least one indoor plant with a pot and several leaves.
A floor lamp.
A side table or low cabinet.
Framed artwork on a wall.
Natural lighting that creates visible depth between objects.
Use a carefully composed three-quarter perspective, similar to an architectural visualization. Keep the furniture arranged attractively on first load.
The initial room must look complete and beautiful without the user touching anything.

Add subtle ambient movement only where it makes sense. The room should not look like a game filled with constantly moving objects.

Lighting and depth

Use a combination of ambient illumination and directional lighting to create a convincing natural-light effect.

Implement real Three.js shadows where practical. Use sensible shadow quality and rendering settings so the application stays responsive.

The scene should have a clear visual hierarchy: the main furniture first, the window and natural light second, and smaller decorative elements third.

If advanced rendering effects are too expensive or unreliable, prioritize attractive materials, good composition, smooth geometry, and consistent lighting over expensive effects.

4. Application layout

Design a polished desktop interface that fits comfortably in a 1440 × 900 browser window.

Top navigation

Create a slim header containing:

ROOM STUDIO wordmark.

A small label reading "INTERIOR DESIGN WORKSPACE".

A room name such as "The Calm Living Room".
A subtle indicator for the currently selected design style.
A working Reset button.
A Screenshot button that captures and downloads an image of the 3D scene.
Keep the header clean and understated.
Main workspace

The 3D scene should occupy approximately 70 to 80 percent of the visual attention.

Use a three-part layout where practical:

A slim tool rail on the left.

A large interactive room viewport in the center.

A compact properties inspector on the right.
The interface should feel like a real creative tool. Do not put every control inside a separate card.
The selected furniture should be identifiable both in the scene and in the inspector.

Left toolbar

Include simple tools for:

Select.

Move.

Rotate.
Toggle the room grid.
Use small, consistent icons. Icons can be inline SVG or CSS where convenient. Do not use emojis as interface icons.
Each tool must have a visible active state and a working purpose.

Right inspector

The inspector should update according to the current selection.

When a furniture object is selected, display:

Its name.

Its category.

Its current material or color.
Its position or rotation controls where practical.
A small selection of suitable color swatches.
When nothing is selected, show room-level properties instead, such as the overall style and lighting settings.
Keep the inspector compact and avoid overwhelming the user with controls.

5. Required interactions

All visible controls must perform real actions. Do not create decorative buttons that do nothing.

A. Orbit and zoom

Allow the user to rotate the camera around the room using mouse or touch input.

Allow zooming within sensible limits.

Keep the room centered and prevent the camera from going underneath the floor or into an unusable angle.

Provide a small Reset View control to restore the original camera position.

B. Select and move furniture

The user must be able to click an object in the 3D scene to select it.

Display a subtle but visible selection indicator, such as a thin outline or highlighted bounding box.

Allow selected movable furniture to be dragged across the floor with the mouse.

Movement must happen on the floor plane rather than randomly in 3D space. Keep objects within the room boundaries and use sensible snapping or grid increments where appropriate.

Selecting furniture from the inspector or object list should select the corresponding object in the scene.

C. Furniture rotation

Add working rotation controls for the selected object.

At minimum, provide rotate-left and rotate-right buttons that turn the object by a sensible increment.

The furniture should visibly rotate around its vertical axis without jumping to a different position.

D. Material and color customization

Add a few tasteful color swatches for applicable objects.

For example:

Sofa: cream linen, sage green, charcoal, and warm brown.

Rug: ivory, sand, terracotta, and muted olive.

Curtains: white linen, beige, and light gray.
Cabinet: natural oak, walnut, and dark wood.
Clicking a swatch must update the actual material of the relevant object in the 3D scene.
The selected swatch should have a clear active indicator.

Do not use random colors. Keep all palettes suitable for the interior-design style.

E. Lighting and time of day

Add a simple time-of-day slider with a range from morning to evening.

As the user moves the slider, update the room's lighting, directional light angle, light color, overall illumination, and window appearance.

Create three especially attractive lighting states:

Morning: soft, warm sunlight entering the room.

Daylight: bright, neutral natural lighting.

Evening: golden light with a slightly warmer, more intimate atmosphere.
The scene must visibly change as the control moves. Do not simply update the label.
Show the current time or lighting preset in the interface.

F. Design presets

Create three working design presets:

Japandi Calm

Natural oak, cream linen, muted green accents, light walls, and warm morning sunlight.

Warm Minimal

Walnut wood, sand-colored fabric, earthy accents, and golden evening light.

Modern Contrast

A darker sofa, pale walls, stronger contrast between wood and fabric, and neutral daylight.

Switching presets should update multiple relevant properties, such as furniture materials, room colors, and lighting.

Do not reload the page when switching presets.

G. Add furniture

Include a small Add Object control that lets the user add at least two object types to the room, such as an indoor plant and a floor lamp.

New objects must actually appear in the scene, have sensible default positions, and be selectable and movable.

Prevent added objects from spawning directly on top of other objects where reasonably possible.

H. Grid toggle

Provide a working grid toggle that displays or hides a subtle placement grid on the floor.

Make the grid visible enough to help position furniture, but not so strong that it distracts from the design.

I. Reset

The Reset button must restore the original furniture arrangement, materials, lighting, room style, and camera view.

The reset must work after objects have been moved, rotated, or recolored.

Do not merely reset the camera while leaving the rest of the room modified.

J. Screenshot

The Screenshot button must download a PNG image of the current 3D room view.

Capture the current scene, including its current furniture arrangement, material colors, and lighting.

Give the downloaded file a sensible name such as room-studio.png.

The button must work without a server or screenshot API.

6. Make the experience feel polished

Pay attention to small details that make the application enjoyable to use.

Use smooth, restrained transitions for panels and control states.

Make selection changes feel immediate.

Use short tooltips for toolbar icons.
Give buttons clear hover, active, and disabled states where appropriate.
Use small labels and subtle separators rather than oversized headings.
Avoid unnecessary popups.
Keep the UI readable against the 3D scene.
Prevent accidental text selection while dragging furniture.
Ensure mouse movement in the 3D viewport does not trigger inappropriate actions in the surrounding UI.
Use sensible interaction rules so rotating the camera, selecting objects, and dragging furniture do not fight each other.
7. Responsive behavior

The application should remain usable on a smaller laptop screen and on mobile.

On narrower screens, reduce the width of the inspector or move it into a collapsible bottom panel.

Keep the room viewport visible rather than allowing the interface to push it off the screen.

Use touch-friendly controls where practical.

The main experience is desktop-first, but the page must not break on mobile.

8. Technical requirements

This is a strict single-file deliverable.

Put the full HTML document, CSS, and JavaScript in one index.html file.

Use Three.js through CDN scripts or ES module imports if necessary.

No React, JSX, npm, Vite, build process, or local asset files.
No backend, database, API keys, or authentication.
Generate the furniture and room with code rather than relying on external images or 3D assets.
Keep the JavaScript organized into understandable functions.
Make sure the 3D canvas resizes correctly when the browser window changes.
Handle missing WebGL support gracefully with a useful message.
Dispose of unnecessary geometry and materials when appropriate.
Keep animation loops efficient. Do not create a new animation loop every time a control is clicked.
Avoid errors in the browser console.
Ensure all buttons, sliders, swatches, selectors, and keyboard or pointer interactions work.
Do not use pseudo-code, placeholder functions, or TODO comments instead of implementing features.
If an advanced feature threatens the stability of the entire application, implement a simpler version that works reliably rather than leaving a broken feature.
9. Final quality check

Before returning the result, check the implementation against these requirements:

The room renders correctly on first load.

The sofa and other furniture look recognizable and well-proportioned.

Camera orbit and zoom work.
Furniture can be selected, dragged, and rotated.
Material swatches change the actual room objects.
The lighting slider creates visible lighting changes.
All three presets visibly change the design.
Adding furniture creates new selectable objects.
The grid toggle works.
Reset restores the original design.
Screenshot downloads a PNG.
The interface fits a desktop viewport and adapts to a smaller screen.
No visible control is intentionally left nonfunctional.
Do not claim that a test passed if you cannot actually execute it. Inspect the code for likely interaction conflicts, syntax errors, missing references, and inconsistent state before returning it.
10. Deliverable

Build the complete working application now.

Return the complete HTML file as one downloadable artifact if your environment supports file creation. Otherwise, output the entire HTML source in a single code block that I can save directly as index.html.

Do not split the solution into multiple files.

Do not give me a tutorial, an implementation plan, a partial prototype, or a long explanation before the code.

Prioritize the initial visual quality, realistic-looking room depth, and reliable interactions. I want a demo that looks impressive in a screen recording and can withstand actually being used, not just a screenshot that looks good.
```

Not rebuilt by 3dmotion yet. Credit stays with @alwayspriyesh.

Prompt by @alwayspriyesh (https://x.com/alwayspriyesh/status/2110243620737745008) via 3dmotion.io/e/3d-room-designer