diff --git a/index.html b/index.html
index 4558648..7342fa3 100644
--- a/index.html
+++ b/index.html
@@ -302,7 +302,15 @@ <h3>Settings</h3>
                             🔄 Reset Settings
                         </button>
                     </div>
-                    
+
+                    <div class="file-upload-container" style="margin-top:10px;">
+                        <input type="file" id="roomFile" accept=".glb,.gltf" onchange="loadRoomFromInput(event)" hidden>
+                        <button class="upload-btn" onclick="document.getElementById('roomFile').click()">Upload 3D Room</button>
+                        <button class="control-btn" onclick="loadDemoRoom()">Load Demo Room</button>
+                        <button class="control-btn" onclick="clearRoom()">Clear Room</button>
+                        <p class="upload-hint">Rooms: GLB, GLTF</p>
+                    </div>
+
                     <!-- Background Position Controls -->
                     <div class="control-group">
                         <label>Background Scale</label>
diff --git a/script.js b/script.js
index 4af11ef..22514ac 100644
--- a/script.js
+++ b/script.js
@@ -308,6 +308,7 @@ setInterval(() => {
 
 // scene
 const scene = new THREE.Scene();
+let room = null;
 
 // light
 const light = new THREE.DirectionalLight(0xffffff);
@@ -1343,8 +1344,7 @@ function removeBackground() {
     
     scene.remove(existingBg);
     
-    // Remove both old and new storage formats
-    localStorage.removeItem('background-media');
+    // Remove stored background reference
     localStorage.removeItem('background-media');
     
     updateStatus('🗑️', 'Background removed');
@@ -1380,6 +1380,60 @@ function resetBackgroundSettings() {
   updateStatus('🔄', 'Background settings reset to defaults');
 }
 
+function clearRoom() {
+  if (room) {
+    scene.remove(room);
+    room = null;
+    updateStatus('🗑️', 'Room cleared');
+  }
+}
+
+function loadRoomFromInput(event) {
+  const file = event.target.files[0];
+  if (!file) return;
+  const url = URL.createObjectURL(file);
+  const loader = new THREE.GLTFLoader();
+  loader.load(url, gltf => {
+    if (room) scene.remove(room);
+    room = gltf.scene;
+    room.traverse(child => {
+      if (child.isMesh) {
+        child.castShadow = true;
+        child.receiveShadow = true;
+      }
+    });
+    scene.add(room);
+    updateStatus('🏠', 'Room loaded');
+    URL.revokeObjectURL(url);
+  }, undefined, error => {
+    console.error('Room loading error:', error);
+    updateStatus('❌', 'Room loading failed');
+    URL.revokeObjectURL(url);
+  });
+}
+
+function loadDemoRoom() {
+  clearRoom();
+  room = new THREE.Group();
+
+  const floor = new THREE.Mesh(
+    new THREE.PlaneGeometry(10, 10),
+    new THREE.MeshLambertMaterial({ color: 0x808080 })
+  );
+  floor.rotation.x = -Math.PI / 2;
+  floor.receiveShadow = true;
+  room.add(floor);
+
+  const wallMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
+  const backWall = new THREE.Mesh(new THREE.PlaneGeometry(10, 5), wallMaterial);
+  backWall.position.set(0, 2.5, -5);
+  backWall.receiveShadow = true;
+  room.add(backWall);
+
+  scene.add(room);
+  updateStatus('🏠', 'Demo room loaded');
+}
+
 // Load saved background on startup
 function loadSavedBackground() {
   // Try new format first