Spaces:

awacke1
/

Happy-Valley-Game

Sleeping

App Files Files Community

awacke1 commited on Apr 5

Commit

4788bb9

verified ·

1 Parent(s): 225f7b1

Update index.html

Browse files

Files changed (1) hide show

index.html +51 -383

index.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Three.js Infinite World</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
@@ -20,408 +20,76 @@
     <script type="module">
         import * as THREE from 'three';
         let scene, camera, renderer, playerMesh;
         let raycaster, mouse;
         const keysPressed = {};
         const playerSpeed = 0.15;
-        let newlyPlacedObjects = []; // Track objects added THIS session for saving
-        const placeholderPlots = new Set(); // Track visually created placeholder grounds: 'x_z' string key
-        const groundMeshes = {}; // Store references to ground meshes: 'x_z' string key -> mesh
-        // --- Session Storage Key ---
-        const SESSION_STORAGE_KEY = 'unsavedInfiniteWorldState';
         // --- Access State from Streamlit ---
-        const allInitialObjects = window.ALL_INITIAL_OBJECTS || [];
-        const plotsMetadata = window.PLOTS_METADATA || []; // List of saved plot info
         const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
         const plotWidth = window.PLOT_WIDTH || 50.0;
-        const plotDepth = window.PLOT_DEPTH || 50.0; // Use plot depth
-        const groundMaterial = new THREE.MeshStandardMaterial({ // Reusable material
-             color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide
-        });
-        const placeholderGroundMaterial = new THREE.MeshStandardMaterial({ // Dimmer for placeholders
-             color: 0x448844, roughness: 0.95, metalness: 0.1, side: THREE.DoubleSide
-        });
         function init() {
-            scene = new THREE.Scene();
-            scene.background = new THREE.Color(0xabcdef);
-            const aspect = window.innerWidth / window.innerHeight;
-            camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 4000); // Increase far plane more
-            camera.position.set(0, 15, 20);
-            camera.lookAt(0, 0, 0);
-            scene.add(camera);
-            setupLighting();
-            setupInitialGround(); // Setup ground for existing plots ONLY initially
-            setupPlayer();
-            raycaster = new THREE.Raycaster();
-            mouse = new THREE.Vector2();
-            renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.shadowMap.enabled = true;
-            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-            document.body.appendChild(renderer.domElement);
-            loadInitialObjects();
-            restoreUnsavedState(); // Restore unsaved objects after initial load
             // Event Listeners
-            document.addEventListener('mousemove', onMouseMove, false);
-            document.addEventListener('click', onDocumentClick, false);
-            window.addEventListener('resize', onWindowResize, false);
-            document.addEventListener('keydown', onKeyDown);
-            document.addEventListener('keyup', onKeyUp);
             // Define global functions needed by Python
             window.teleportPlayer = teleportPlayer;
-            window.getSaveDataAndPosition = getSaveDataAndPosition; // Renamed JS function
-            window.resetNewlyPlacedObjects = resetNewlyPlacedObjects;
-            console.log("Three.js Initialized. World ready.");
             animate();
         }
-        function setupLighting() { /* ... unchanged ... */
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-            scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
-            directionalLight.position.set(50, 150, 100); // Higher and angled light
-            directionalLight.castShadow = true;
-            directionalLight.shadow.mapSize.width = 4096; // Increase shadow map size
-            directionalLight.shadow.mapSize.height = 4096;
-            directionalLight.shadow.camera.near = 0.5;
-            directionalLight.shadow.camera.far = 500;
-            // Dynamic frustum needed for large worlds, but keep wide for now
-            directionalLight.shadow.camera.left = -150;
-            directionalLight.shadow.camera.right = 150;
-            directionalLight.shadow.camera.top = 150;
-            directionalLight.shadow.camera.bottom = -150;
-            directionalLight.shadow.bias = -0.001;
-            scene.add(directionalLight);
-        }
-        function setupInitialGround() {
-            // Create ground ONLY for plots defined in plotsMetadata
-            console.log(`Setting up initial ground for ${plotsMetadata.length} plots.`);
-            plotsMetadata.forEach(plot => {
-                createGroundPlane(plot.grid_x, plot.grid_z, false); // false = not a placeholder
-            });
-             // Create a small initial ground at 0,0 if no plots exist yet
-             if (plotsMetadata.length === 0) {
-                  createGroundPlane(0, 0, false);
-             }
-        }
-        // *** NEW: Function to create a ground plane for a specific grid cell ***
-        function createGroundPlane(gridX, gridZ, isPlaceholder) {
-            const gridKey = `${gridX}_${gridZ}`;
-            if (groundMeshes[gridKey]) return; // Don't recreate if it exists
-            console.log(`Creating ${isPlaceholder ? 'placeholder' : 'initial'} ground at ${gridX}, ${gridZ}`);
-            const groundGeometry = new THREE.PlaneGeometry(plotWidth, plotDepth);
-            const material = isPlaceholder ? placeholderGroundMaterial : groundMaterial;
-            const groundMesh = new THREE.Mesh(groundGeometry, material);
-            groundMesh.rotation.x = -Math.PI / 2;
-            groundMesh.position.y = -0.05;
-            // Position the center of the plane correctly
-            groundMesh.position.x = gridX * plotWidth + plotWidth / 2.0;
-            groundMesh.position.z = gridZ * plotDepth + plotDepth / 2.0;
-            groundMesh.receiveShadow = true;
-            groundMesh.userData.gridKey = gridKey; // Store key for potential removal/update
-            scene.add(groundMesh);
-            groundMeshes[gridKey] = groundMesh; // Store reference
-            if (isPlaceholder) {
-                 placeholderPlots.add(gridKey); // Track placeholders
-            }
-        }
-        function setupPlayer() { /* ... unchanged ... */
-            const playerGeo = new THREE.CapsuleGeometry(0.4, 0.8, 4, 8);
-            const playerMat = new THREE.MeshStandardMaterial({ color: 0x0000ff, roughness: 0.6 });
-            playerMesh = new THREE.Mesh(playerGeo, playerMat);
-            playerMesh.position.set(plotWidth / 2, 0.4 + 0.8/2, plotDepth/2); // Start in center of 0,0 plot
-            playerMesh.castShadow = true; playerMesh.receiveShadow = true;
-            scene.add(playerMesh);
-        }
-        function loadInitialObjects() { /* ... unchanged, uses createAndPlaceObject ... */
-            console.log(`Loading ${allInitialObjects.length} initial objects from Python.`);
-            allInitialObjects.forEach(objData => { createAndPlaceObject(objData, false); });
-            console.log("Finished loading initial objects.");
-        }
-        function createAndPlaceObject(objData, isNewObject) { /* ... unchanged ... */
-             let loadedObject = null;
-             switch (objData.type) {
-                 case "Simple House": loadedObject = createSimpleHouse(); break;
-                 case "Tree": loadedObject = createTree(); break;
-                 case "Rock": loadedObject = createRock(); break;
-                 case "Fence Post": loadedObject = createFencePost(); break;
-                 default: console.warn("Unknown object type in data:", objData.type); break;
-             }
-             if (loadedObject) {
-                 if (objData.position && objData.position.x !== undefined) {
-                     loadedObject.position.set(objData.position.x, objData.position.y, objData.position.z);
-                 } else if (objData.pos_x !== undefined) {
-                      loadedObject.position.set(objData.pos_x, objData.pos_y, objData.pos_z);
-                 }
-                 if (objData.rotation) {
-                     loadedObject.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
-                 } else if (objData.rot_x !== undefined) {
-                     loadedObject.rotation.set(objData.rot_x, objData.rot_y, objData.rot_z, objData.rot_order || 'XYZ');
-                 }
-                 loadedObject.userData.obj_id = objData.obj_id || loadedObject.userData.obj_id;
-                 scene.add(loadedObject);
-                 if (isNewObject) { newlyPlacedObjects.push(loadedObject); }
-                 return loadedObject;
-            }
-            return null;
-        }
-        function saveUnsavedState() { /* ... unchanged ... */
-            try {
-                const stateToSave = newlyPlacedObjects.map(obj => ({ obj_id: obj.userData.obj_id, type: obj.userData.type, position: { x: obj.position.x, y: obj.position.y, z: obj.position.z }, rotation: { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order } }));
-                sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave));
-                console.log(`Saved ${stateToSave.length} unsaved objects to sessionStorage.`);
-            } catch (e) { console.error("Error saving state to sessionStorage:", e); }
-        }
-        function restoreUnsavedState() { /* ... unchanged ... */
-             try {
-                const savedState = sessionStorage.getItem(SESSION_STORAGE_KEY);
-                if (savedState) {
-                    console.log("Found unsaved state in sessionStorage. Restoring...");
-                    const objectsToRestore = JSON.parse(savedState);
-                    if (Array.isArray(objectsToRestore)) {
-                         newlyPlacedObjects = []; let count = 0;
-                         objectsToRestore.forEach(objData => { if(createAndPlaceObject(objData, true)) { count++; } });
-                         console.log(`Restored ${count} objects.`);
-                    }
-                } else { console.log("No unsaved state found in sessionStorage."); }
-            } catch (e) { console.error("Error restoring state from sessionStorage:", e); sessionStorage.removeItem(SESSION_STORAGE_KEY); }
-        }
-        function clearUnsavedState() { /* ... unchanged ... */
-            sessionStorage.removeItem(SESSION_STORAGE_KEY);
-            newlyPlacedObjects = [];
-            console.log("Cleared unsaved state from memory and sessionStorage.");
-        }
-        function createObjectBase(type) { /* ... unchanged ... */
-             return { userData: { type: type, obj_id: THREE.MathUtils.generateUUID() } };
-        }
-        function createSimpleHouse() { /* ... unchanged ... */
-            const base = createObjectBase("Simple House"); const group = new THREE.Group(); Object.assign(group, base);
-            const mat1=new THREE.MeshStandardMaterial({color:0xffccaa,roughness:0.8}), mat2=new THREE.MeshStandardMaterial({color:0xaa5533,roughness:0.7});
-            const m1=new THREE.Mesh(new THREE.BoxGeometry(2,1.5,2.5),mat1); m1.position.y=1.5/2;m1.castShadow=true;m1.receiveShadow=true;group.add(m1);
-            const m2=new THREE.Mesh(new THREE.ConeGeometry(1.8,1,4),mat2); m2.position.y=1.5+1/2;m2.rotation.y=Math.PI/4;m2.castShadow=true;m2.receiveShadow=true;group.add(m2); return group;
-         }
-         function createTree() { /* ... unchanged ... */
-            const base=createObjectBase("Tree"); const group=new THREE.Group(); Object.assign(group,base);
-            const mat1=new THREE.MeshStandardMaterial({color:0x8B4513,roughness:0.9}), mat2=new THREE.MeshStandardMaterial({color:0x228B22,roughness:0.8});
-            const m1=new THREE.Mesh(new THREE.CylinderGeometry(0.3,0.4,2,8),mat1); m1.position.y=1; m1.castShadow=true;m1.receiveShadow=true;group.add(m1);
-            const m2=new THREE.Mesh(new THREE.IcosahedronGeometry(1.2,0),mat2); m2.position.y=2.8; m2.castShadow=true;m2.receiveShadow=true;group.add(m2); return group;
-         }
-         function createRock() { /* ... unchanged ... */
-             const base=createObjectBase("Rock"); const mat=new THREE.MeshStandardMaterial({color:0xaaaaaa,roughness:0.8,metalness:0.1});
-             const rock=new THREE.Mesh(new THREE.IcosahedronGeometry(0.7,0),mat); Object.assign(rock,base);
-             rock.position.y=0.35; rock.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, 0); rock.castShadow=true;rock.receiveShadow=true; return rock;
-         }
-         function createFencePost() { /* ... unchanged ... */
-             const base=createObjectBase("Fence Post"); const mat=new THREE.MeshStandardMaterial({color:0xdeb887,roughness:0.9});
-             const post=new THREE.Mesh(new THREE.BoxGeometry(0.2,1.5,0.2),mat); Object.assign(post,base);
-             post.position.y=0.75; post.castShadow=true;post.receiveShadow=true; return post;
-         }
-        // --- Event Handlers ---
-        function onMouseMove(event) { /* ... unchanged ... */
-            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-        }
-        function onDocumentClick(event) { // Place object and save state
-             if (selectedObjectType === "None") return;
-             // Determine ground mesh to intersect (could be multiple now)
-             const groundCandidates = Object.values(groundMeshes);
-             if (groundCandidates.length === 0) return; // No ground to place on
-             raycaster.setFromCamera(mouse, camera);
-             // Intersect ALL ground meshes
-             const intersects = raycaster.intersectObjects(groundCandidates);
-             if (intersects.length > 0) {
-                 // Intersect point is on the specific ground mesh clicked
-                 const intersectPoint = intersects[0].point;
-                 let newObjectToPlace = null;
-                 switch (selectedObjectType) { /* ... create object ... */
-                    case "Simple House": newObjectToPlace = createSimpleHouse(); break;
-                    case "Tree": newObjectToPlace = createTree(); break;
-                    case "Rock": newObjectToPlace = createRock(); break;
-                    case "Fence Post": newObjectToPlace = createFencePost(); break;
-                    default: return;
-                 }
-                 if (newObjectToPlace) {
-                     newObjectToPlace.position.copy(intersectPoint);
-                     // Adjust Y position if needed based on object geometry origin
-                     // Base objects on y=0 in create functions for simplicity
-                     if(newObjectToPlace.geometry?.type.includes("Geometry")){ // Adjust Y so base is on ground
-                          newObjectToPlace.position.y += 0.01; // Slight offset above ground
-                     } else if (newObjectToPlace.type === "Group") {
-                          newObjectToPlace.position.y += 0.01; // Assume group base is near 0
-                     }
-                     scene.add(newObjectToPlace);
-                     newlyPlacedObjects.push(newObjectToPlace);
-                     saveUnsavedState(); // Save to sessionStorage immediately
-                     console.log(`Placed new ${selectedObjectType}. Total unsaved: ${newlyPlacedObjects.length}`);
-                 }
-             }
-        }
-        function onKeyDown(event) { keysPressed[event.code] = true; }
-        function onKeyUp(event) { keysPressed[event.code] = false; }
-        // --- Functions called by Python via streamlit-js-eval ---
-        function teleportPlayer(targetX, targetZ) { // Now accepts Z coordinate
-            console.log(`JS teleportPlayer called with targetX: ${targetX}, targetZ: ${targetZ}`);
-            if (playerMesh) {
-                // Teleport near center of the target plot
-                playerMesh.position.x = targetX;
-                playerMesh.position.z = targetZ;
-                 const offset = new THREE.Vector3(0, 15, 20);
-                 const targetPosition = playerMesh.position.clone().add(offset);
-                 camera.position.copy(targetPosition);
-                 camera.lookAt(playerMesh.position);
-                 console.log("Player teleported to:", playerMesh.position);
-            } else { console.error("Player mesh not found for teleport."); }
-        }
-        // *** UPDATED: Send player position along with save data ***
-        function getSaveDataAndPosition() {
-             console.log(`JS getSaveDataAndPosition called. Found ${newlyPlacedObjects.length} new objects.`);
-             const objectsToSave = newlyPlacedObjects.map(obj => {
-                 if (!obj.userData || !obj.userData.type) { return null; }
-                 const rotation = { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order };
-                 return { // Send WORLD positions
-                     obj_id: obj.userData.obj_id, type: obj.userData.type,
-                     position: { x: obj.position.x, y: obj.position.y, z: obj.position.z },
-                     rotation: rotation
-                 };
-             }).filter(obj => obj !== null);
-             const playerPos = playerMesh ? { x: playerMesh.position.x, y: playerMesh.position.y, z: playerMesh.position.z } : {x:0, y:0, z:0};
-             const payload = {
-                 playerPosition: playerPos,
-                 objectsToSave: objectsToSave
-             };
-             console.log("Prepared payload for saving:", payload);
-             return JSON.stringify(payload); // Return as JSON string
-        }
-        function resetNewlyPlacedObjects() { // Called by Python AFTER successful save
-             console.log(`JS resetNewlyPlacedObjects called.`);
-             clearUnsavedState(); // Clear memory array AND sessionStorage
-        }
-        // --- Animation Loop ---
-        function updatePlayerMovement() {
-            if (!playerMesh) return;
-            const moveDirection = new THREE.Vector3(0, 0, 0);
-            // Basic WASD movement
-            if (keysPressed['KeyW'] || keysPressed['ArrowUp']) moveDirection.z -= 1;
-            if (keysPressed['KeyS'] || keysPressed['ArrowDown']) moveDirection.z += 1;
-            if (keysPressed['KeyA'] || keysPressed['ArrowLeft']) moveDirection.x -= 1;
-            if (keysPressed['KeyD'] || keysPressed['ArrowRight']) moveDirection.x += 1;
-            if (moveDirection.lengthSq() > 0) {
-                moveDirection.normalize().multiplyScalar(playerSpeed);
-                // Apply movement relative to camera direction for better control
-                 const forward = new THREE.Vector3();
-                 camera.getWorldDirection(forward);
-                 forward.y = 0; // Project onto XZ plane
-                 forward.normalize();
-                 const right = new THREE.Vector3().crossVectors(camera.up, forward).normalize(); // Get right vector
-                 const worldMove = new THREE.Vector3();
-                 worldMove.add(forward.multiplyScalar(-moveDirection.z)); // W/S -> Forward/Backward
-                 worldMove.add(right.multiplyScalar(-moveDirection.x)); // A/D -> Left/Right
-                 worldMove.normalize().multiplyScalar(playerSpeed);
-                 playerMesh.position.add(worldMove);
-                 // Basic ground clamping
-                 playerMesh.position.y = Math.max(playerMesh.position.y, 0.4 + 0.8/2); // Adjust based on capsule base
-                 // *** ADDED: Check for ground expansion ***
-                 checkAndExpandGround();
-            }
-        }
-        // *** NEW: Check if player is near edge and create placeholder ground ***
-        function checkAndExpandGround() {
-            if (!playerMesh) return;
-            const currentGridX = Math.floor(playerMesh.position.x / plotWidth);
-            const currentGridZ = Math.floor(playerMesh.position.z / plotDepth);
-            // Check surrounding cells (Manhattan distance 1)
-            for (let dx = -1; dx <= 1; dx++) {
-                 for (let dz = -1; dz <= 1; dz++) {
-                      if (dx === 0 && dz === 0) continue; // Skip current cell
-                      const checkX = currentGridX + dx;
-                      const checkZ = currentGridZ + dz;
-                      const gridKey = `${checkX}_${checkZ}`;
-                      // Check if this grid cell already has ground (initial or placeholder)
-                      if (!groundMeshes[gridKey]) {
-                           // Check if this grid cell corresponds to a SAVED plot (from metadata)
-                           const isSavedPlot = plotsMetadata.some(plot => plot.grid_x === checkX && plot.grid_z === checkZ);
-                           // If it's NOT a saved plot, create a placeholder
-                           if (!isSavedPlot) {
-                                createGroundPlane(checkX, checkZ, true); // true = is placeholder
-                           }
-                           // If it IS a saved plot but somehow missing ground (error?), recreate it?
-                           // else { createGroundPlane(checkX, checkZ, false); } // Optional robustness
-                      }
-                 }
-            }
-        }
-        function updateCamera() { /* ... unchanged ... */
-            if (!playerMesh) return;
-            const offset = new THREE.Vector3(0, 15, 20); // Fixed offset for now
-            const targetPosition = playerMesh.position.clone().add(offset);
-            camera.position.lerp(targetPosition, 0.08);
-            camera.lookAt(playerMesh.position);
-        }
-        function onWindowResize() { /* ... unchanged ... */
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }
-        function animate() {
-            requestAnimationFrame(animate);
-            updatePlayerMovement(); // Includes ground check now
-            updateCamera();
-            renderer.render(scene, camera);
-        }
-        // --- Start ---
-        init();
-    </script>
-</body>
-</html>

 <!DOCTYPE html>
 <html>
 <head>
+    <title>Three.js Synced World (DB Backend)</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
     <script type="module">
         import * as THREE from 'three';
+        // ... (Keep all variables: scene, camera, renderer, playerMesh, etc.) ...
         let scene, camera, renderer, playerMesh;
         let raycaster, mouse;
         const keysPressed = {};
         const playerSpeed = 0.15;
+        let newlyPlacedObjects = []; // For sessionStorage persistence between non-save reruns
+        const placeholderPlots = new Set();
+        const groundMeshes = {};
+        const allRenderedObjects = {}; // Track all scene objects: id -> mesh/group
+        const SESSION_STORAGE_KEY = 'unsavedDbWorldState_v2';
         // --- Access State from Streamlit ---
+        const allInitialObjects = window.ALL_INITIAL_OBJECTS || []; // From DB
+        const plotsMetadata = window.PLOTS_METADATA || []; // From DB
         const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
         const plotWidth = window.PLOT_WIDTH || 50.0;
+        const plotDepth = window.PLOT_DEPTH || 50.0;
+        const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide });
+        const placeholderGroundMaterial = new THREE.MeshStandardMaterial({ color: 0x448844, roughness: 0.95, metalness: 0.1, side: THREE.DoubleSide });
+        // --- init() function ---
         function init() {
+            // ... (scene, camera, renderer setup as before) ...
+             scene = new THREE.Scene(); scene.background = new THREE.Color(0xabcdef);
+             const aspect = window.innerWidth / window.innerHeight; camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 4000); camera.position.set(0, 15, 20); camera.lookAt(0, 0, 0); scene.add(camera);
+             setupLighting(); setupInitialGround(); setupPlayer();
+             raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2();
+             renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement);
+            loadInitialObjects(); // Load from DB data
+            restoreUnsavedState(); // Restore from SessionStorage
             // Event Listeners
+            document.addEventListener('mousemove', onMouseMove, false); document.addEventListener('click', onDocumentClick, false); window.addEventListener('resize', onWindowResize, false); document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp);
             // Define global functions needed by Python
             window.teleportPlayer = teleportPlayer;
+            window.getSaveDataAndPosition = getSaveDataAndPosition; // Ensure this is defined correctly below
+            // window.resetNewlyPlacedObjects = resetNewlyPlacedObjects; // No longer needed
+            console.log("Three.js Initialized (DB Backend v2). World ready.");
             animate();
         }
+        // --- setupLighting(), setupInitialGround(), createGroundPlane(), setupPlayer() ---
+        // ... (Keep these functions exactly as in the previous version) ...
+         function setupLighting() { const a=new THREE.AmbientLight(0xffffff,0.5); scene.add(a); const d=new THREE.DirectionalLight(0xffffff,1.0); d.position.set(50,150,100); d.castShadow=true; d.shadow.mapSize.width=4096; d.shadow.mapSize.height=4096; d.shadow.camera.near=0.5; d.shadow.camera.far=500; d.shadow.camera.left=-150; d.shadow.camera.right=150; d.shadow.camera.top=150; d.shadow.camera.bottom=-150; d.shadow.bias=-0.001; scene.add(d); }
+         function setupInitialGround() { plotsMetadata.forEach(p => {createGroundPlane(p.grid_x,p.grid_z,false);}); if(plotsMetadata.length===0) {createGroundPlane(0,0,false);} }
+         function createGroundPlane(gx,gz,isPlaceholder) { const k=`<span class="math-inline">\{gx\}\_</span>{gz}`; if(groundMeshes[k]) return; const geo=new THREE.PlaneGeometry(plotWidth,plotDepth); const mat=isPlaceholder?placeholderGroundMaterial:groundMaterial; const mesh=new THREE.Mesh(geo,mat); mesh.rotation.x=-Math.PI/2; mesh.position.y=-0.05; mesh.position.x=gx*plotWidth+plotWidth/2; mesh.position.z=gz*plotDepth+plotDepth/2; mesh.receiveShadow=true; mesh.userData.gridKey=k; scene.add(mesh); groundMeshes[k]=mesh; if(isPlaceholder){placeholderPlots.add(k);} }
+         function setupPlayer() { const g=new THREE.CapsuleGeometry(0.4,0.8,4,8); const m=new THREE.MeshStandardMaterial({color:0x0000ff,roughness:0.6}); playerMesh=new THREE.Mesh(g,m); playerMesh.position.set(plotWidth/2,0.8,plotDepth/2); playerMesh.castShadow=true; playerMesh.receiveShadow=true; scene.add(playerMesh); }
+        // --- loadInitialObjects(), clearAllRenderedObjects(), createAndPlaceObject() ---
+        // ... (Keep these functions exactly as in the previous version - ensuring createAndPlaceObject adds to allRenderedObjects) ...
+         function loadInitialObjects() { console.log(`Loading ${allInitialObjects.length} initial objects.`); clearAllRenderedObjects(); allInitialObjects.forEach(d => { createAndPlaceObject(d, false); }); console.log("Finished initial load."); }
+         function clearAllRenderedObjects() { Object.values(allRenderedObjects).forEach(o => scene.remove(o)); for (const k in allRenderedObjects) delete allRenderedObjects[k]; newlyPlacedObjects = []; /* Important: clear this too when reloading all */ }
+         function createAndPlaceObject(objData, isNewObjectForSession) { let obj=null; switch (objData.type) { case "Simple House": obj=createSimpleHouse(); break; case "Tree": obj=createTree(); break; case "Rock": obj=createRock(); break; case "Fence Post": obj=createFencePost(); break; default: return null; } if (obj) { obj.userData.obj_id = objData.obj_id || obj.userData.obj_id; if (allRenderedObjects[obj.userData.obj_id]) return null; if(objData.position&&objData.position.x!==undefined){obj.position.set(objData.position.x,objData.position.y,objData.position.z);}else if(objData.pos_x!==undefined){obj.position.set(objData.pos_x,objData.pos_y,objData.pos_z);} if(objData.rotation){obj.rotation.set(objData.rotation._x,objData.rotation._y,objData.rotation._z,objData.rotation._order||'XYZ');}else if(objData.rot_x!==undefined){obj.rotation.set(objData.rot_x,objData.rot_y,objData.rot_z,objData.rot_order||'XYZ');} scene.add(obj); allRenderedObjects[obj.userData.obj_id] = obj; if(isNewObjectForSession){newlyPlacedObjects.push(obj);} return obj; } return null; }
+        // --- saveUnsavedState(), restoreUnsavedState(), clearUnsavedSessionState() ---
+        // ... (Keep these sessionStorage functions exactly as in the previous version) ...
+         function saveUnsavedState() { try { const d = newlyPlacedObjects.map(o => ({obj_id:o.userData.obj_id, type:o.userData.type, position:{x:o.position.x,y:o.position.y,z:o.position.z}, rotation:{_x:o.rotation.x,_y:o.rotation.y,_z:o.rotation.z,_order:o.rotation.order}})); sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(d)); } catch(e) { console.error("Session save error:", e); } }
+         function restoreUnsavedState() { try { const s=sessionStorage.getItem(SESSION_STORAGE_KEY); if(s) { const d=JSON.parse(s); if(Array.isArray(d)) { let c=0; d.forEach(o => { if(createAndPlaceObject(o, true)) c++;}); console.log(`Restored ${c} unsaved objects.`); } } } catch(e) { console.error("Session restore error:", e); sessionStorage.removeItem(SESSION_STORAGE_KEY); } }
+         // function clearUnsavedSessionState() { sessionStorage.removeItem(SESSION_STORAGE_KEY); newlyPlacedObjects = []; console.log("Cleared unsaved session state."); } // Might be useful later
+        // --- Object Creation Functions ---
+        // ... (Keep these exactly as before, ensuring they assign userData.type and userData.obj_id) ...
+        function createObjectBase(type) { return { userData: { type: type, obj_id: THREE.MathUtils.generateUUID() } }; }
+        function createSimpleHouse() { const base = createObjectBase("Simple House"); const group = new THREE.Group(); Object.assign(group, base); const mat1=new THREE.MeshStandardMaterial({color:0xffccaa,roughness:0.8}), mat2=new THREE.MeshStandardMaterial({color:0xaa5533,roughness:0.7}); const m1=new THREE.Mesh(new THREE.BoxGeometry(2,1.5,2.5),mat1); m1.position.y=0.75;m1.castShadow=true;m1.receiveShadow=true;group.add(m1); const m2=new THREE.Mesh(new THREE.ConeGeometry(1.8,1,4),mat2); m2.position.y=1.5+0.5;m2.rotation.y=Math.PI/4;m2.castShadow=true;m2.receiveShadow=true;group.add(m2); return group; }
+        function createTree() { const base=createObjectBase("Tree"); const group=new THREE.Group(); Object.assign(group,base); const mat1=new THREE.MeshStandardMaterial({color:0x8B4513,roughness:0.9}), mat2=new THREE.MeshStandardMaterial({color:0x228B22,roughness:0.8}); const m1=new THREE.Mesh(new THREE.CylinderGeometry(0.3,0.4,2,8),mat1); m1.position.y=1; m1.castShadow=true;m1.receiveShadow=true;group.add(m1); const m2=