Spaces:

awacke1
/

Happy-Valley-Game

Sleeping

App Files Files Community

awacke1 commited on Apr 6

Commit

26cbb1c

verified ·

1 Parent(s): 9447266

Update index.html

Browse files

Files changed (1) hide show

index.html +196 -311

index.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Three.js Shared World</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
@@ -19,7 +19,6 @@
     <script type="module">
         import * as THREE from 'three';
-        // No OrbitControls needed if using custom player movement
         let scene, camera, renderer, playerMesh;
         let raycaster, mouse;
@@ -28,18 +27,18 @@
         // --- State Management ---
         let newlyPlacedObjects = []; // Track objects added THIS client, THIS session, NOT YET SAVED
-        const serverObjectsMap = new Map(); // Map<obj_id, THREE.Object3D> - Objects loaded from server
-        let pollIntervalId = null; // To store the interval timer
-        // --- Access State from Streamlit (Injected) ---
-        const initialWorldState = window.INITIAL_WORLD_STATE || []; // List of authoritative objects on load
         const plotsMetadata = window.PLOTS_METADATA || []; // List of saved plot info
-        let selectedObjectType = window.SELECTED_OBJECT_TYPE || "None"; // Can be updated by Python
         const plotWidth = window.PLOT_WIDTH || 50.0;
         const plotDepth = window.PLOT_DEPTH || 50.0;
-        const pollIntervalMs = window.STATE_POLL_INTERVAL_MS || 5000;
         const groundMaterial = new THREE.MeshStandardMaterial({
             color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide, name: "ground_saved"
@@ -47,7 +46,6 @@
         const placeholderGroundMaterial = new THREE.MeshStandardMaterial({
             color: 0x448844, roughness: 0.95, metalness: 0.1, side: THREE.DoubleSide, name: "ground_placeholder"
         });
-        const groundMeshes = {}; // Store references to ground meshes: 'x_z' string key -> mesh
         function init() {
@@ -56,12 +54,12 @@
             const aspect = window.innerWidth / window.innerHeight;
             camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 4000);
-            camera.position.set(plotWidth / 2, 15, plotDepth / 2 + 20); // Start looking at center of 0,0
             camera.lookAt(plotWidth/2, 0, plotDepth/2);
             scene.add(camera);
             setupLighting();
-            setupInitialGround(); // Setup ground based on PLOTS_METADATA
             setupPlayer();
             raycaster = new THREE.Raycaster();
@@ -70,14 +68,21 @@
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.shadowMap.enabled = true;
-            renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
             document.body.appendChild(renderer.domElement);
-            // --- Load Initial Objects provided by Server ---
-            console.log(`Loading ${initialWorldState.length} initial objects from Python.`);
-            synchronizeWorldState(initialWorldState); // Use the sync function for initial load too
-            // restoreUnsavedState(); // Maybe not needed if polling handles everything? Or keep for page reloads? Let's disable for now.
             // Event Listeners
             document.addEventListener('mousemove', onMouseMove, false);
@@ -88,34 +93,30 @@
             // --- Define global functions needed by Python ---
             window.teleportPlayer = teleportPlayer;
-            window.getNewlyPlacedObjectsForSave = getNewlyPlacedObjectsForSave; // Function for save button
             window.resetNewlyPlacedObjects = resetNewlyPlacedObjects; // Called by Python after successful save
-            window.updateSelectedObjectType = updateSelectedObjectType; // Called by Python when selectbox changes
-            // --- Start Polling for State Updates ---
-            startPolling();
-            console.log("Three.js Initialized. World ready. Starting state polling.");
             animate();
         }
         function setupLighting() {
-             const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // Slightly brighter ambient
             scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); // Stronger directional
-            directionalLight.position.set(75, 150, 100); // Angled light
             directionalLight.castShadow = true;
-            directionalLight.shadow.mapSize.width = 2048; // Balance performance and quality
             directionalLight.shadow.mapSize.height = 2048;
-            directionalLight.shadow.camera.near = 10;     // Adjust frustum based on typical scene scale
             directionalLight.shadow.camera.far = 400;
-            directionalLight.shadow.camera.left = -150;   // Wider shadow area
             directionalLight.shadow.camera.right = 150;
             directionalLight.shadow.camera.top = 150;
             directionalLight.shadow.camera.bottom = -150;
-            directionalLight.shadow.bias = -0.002; // Adjust shadow bias carefully
             scene.add(directionalLight);
-             // Add a hemisphere light for softer fill
             const hemiLight = new THREE.HemisphereLight( 0xabcdef, 0x55aa55, 0.5 );
             scene.add( hemiLight );
         }
@@ -123,33 +124,32 @@
         function setupInitialGround() {
             console.log(`Setting up initial ground for ${plotsMetadata.length} saved plots.`);
             plotsMetadata.forEach(plot => {
-                createGroundPlane(plot.grid_x, plot.grid_z, false); // false = not a placeholder
             });
-             // Ensure ground at 0,0 exists if no plots are saved yet
             if (!groundMeshes['0_0']) {
-                 createGroundPlane(0, 0, false); // Create the starting ground if needed
             }
         }
         function createGroundPlane(gridX, gridZ, isPlaceholder) {
             const gridKey = `${gridX}_${gridZ}`;
-            if (groundMeshes[gridKey]) return groundMeshes[gridKey]; // Don't recreate
-            // 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; // Slightly below 0
             groundMesh.position.x = gridX * plotWidth + plotWidth / 2.0;
             groundMesh.position.z = gridZ * plotDepth + plotDepth / 2.0;
             groundMesh.receiveShadow = true;
             groundMesh.userData.gridKey = gridKey;
             groundMesh.userData.isPlaceholder = isPlaceholder;
             scene.add(groundMesh);
-            groundMeshes[gridKey] = groundMesh; // Store reference
             return groundMesh;
         }
@@ -157,207 +157,141 @@
             const playerGeo = new THREE.CapsuleGeometry(0.4, 0.8, 4, 8);
             const playerMat = new THREE.MeshStandardMaterial({ color: 0x0055ff, roughness: 0.6 });
             playerMesh = new THREE.Mesh(playerGeo, playerMat);
-            playerMesh.position.set(plotWidth / 2, 0.8, plotDepth / 2); // Start Y pos based on capsule height/2 + radius maybe?
             playerMesh.castShadow = true;
-            playerMesh.receiveShadow = false; // Player shouldn't receive shadows on itself much
             scene.add(playerMesh);
         }
-        // --- Core State Synchronization Logic ---
-        function synchronizeWorldState(serverStateList) {
-            console.log(`Synchronizing state. Received ${serverStateList.length} objects from server.`);
-            const receivedIds = new Set();
-            let updatedCount = 0;
-            let addedCount = 0;
-            let removedCount = 0;
-            // 1. Add new objects and Update existing ones
-            serverStateList.forEach(objData => {
-                if (!objData || !objData.obj_id) {
-                    console.warn("Received invalid object data during sync:", objData);
-                    return;
-                }
-                receivedIds.add(objData.obj_id);
-                const existingMesh = serverObjectsMap.get(objData.obj_id);
-                if (existingMesh) {
-                    // Object exists, check if update needed (simple position/rotation check)
-                    let needsUpdate = false;
-                    if (existingMesh.position.distanceToSquared(objData.position) > 0.01) { // Use squared distance, epsilon check
-                         existingMesh.position.set(objData.position.x, objData.position.y, objData.position.z);
-                         needsUpdate = true;
-                    }
-                    // TODO: Add more robust rotation check if needed (e.g., quaternion comparison)
-                    if (objData.rotation &&
-                        (Math.abs(existingMesh.rotation.x - objData.rotation._x) > 0.01 ||
-                         Math.abs(existingMesh.rotation.y - objData.rotation._y) > 0.01 ||
-                         Math.abs(existingMesh.rotation.z - objData.rotation._z) > 0.01 )) {
-                        existingMesh.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
-                        needsUpdate = true;
-                    }
-                    if(needsUpdate) updatedCount++;
-                } else {
-                    // Object is new, create and add it
-                    const newMesh = createAndPlaceObject(objData, false); // false = not a "newly placed" local object
-                    if (newMesh) {
-                        serverObjectsMap.set(objData.obj_id, newMesh); // Add to our server map
-                        addedCount++;
-                    } else {
-                         console.warn("Failed to create object mesh for:", objData);
-                    }
-                }
-            });
-            // 2. Remove objects that are in our scene but NOT in the server list
-            const idsToRemove = [];
-            for (const [obj_id, mesh] of serverObjectsMap.entries()) {
-                if (!receivedIds.has(obj_id)) {
-                    // This object was removed on the server
-                    scene.remove(mesh);
-                     // Dispose geometry/material? Important for larger scenes
-                    if (mesh.geometry) mesh.geometry.dispose();
-                    if (mesh.material) {
-                         if (Array.isArray(mesh.material)) {
-                            mesh.material.forEach(m => m.dispose());
-                         } else {
-                            mesh.material.dispose();
-                         }
-                    }
-                    idsToRemove.push(obj_id);
-                    removedCount++;
-                }
             }
-             // Remove from the map after iteration
-            idsToRemove.forEach(id => serverObjectsMap.delete(id));
-            if(addedCount > 0 || removedCount > 0 || updatedCount > 0) {
-                 console.log(`Sync complete: ${addedCount} added, ${updatedCount} updated, ${removedCount} removed.`);
-            }
-            // else { console.log("Sync complete: No changes detected."); }
-             // 3. Update ground planes based on latest plot metadata (if it changes - less frequent)
-             // This could be done less often than object sync if metadata is stable.
-             updateGroundFromMetadata();
-        }
-        function updateGroundFromMetadata() {
-             const currentMetadata = window.PLOTS_METADATA || []; // Get potentially updated metadata
-             const metadataKeys = new Set();
-             // Ensure ground exists for all saved plots and is not a placeholder
-             currentMetadata.forEach(plot => {
-                 const gridKey = `${plot.grid_x}_${plot.grid_z}`;
-                 metadataKeys.add(gridKey);
-                 const existingGround = groundMeshes[gridKey];
-                 if (existingGround) {
-                      // If it exists but was a placeholder, upgrade it
-                      if (existingGround.userData.isPlaceholder) {
-                           console.log(`Upgrading placeholder ground at ${gridKey} to saved.`);
-                           existingGround.material = groundMaterial;
-                           existingGround.userData.isPlaceholder = false;
-                      }
-                 } else {
-                      // If it doesn't exist, create it as a saved plot
-                      console.log(`Creating missing saved ground at ${gridKey}.`);
-                      createGroundPlane(plot.grid_x, plot.grid_z, false);
-                 }
-             });
-             // Optional: Remove placeholder ground if a plot was deleted externally?
-             // Or just let them persist visually until player moves away.
-        }
-        function createAndPlaceObject(objData, isNewlyPlaced) {
-            let loadedObject = null;
             const objType = objData.type;
-            // Use a factory pattern for cleaner object creation
             switch (objType) {
-                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:", objType); return null;
             }
-            if (loadedObject) {
-                 // Set common properties
-                 loadedObject.userData.obj_id = objData.obj_id || THREE.MathUtils.generateUUID(); // Ensure ID exists
-                 loadedObject.userData.type = objType;
-                 loadedObject.userData.isNewlyPlaced = isNewlyPlaced; // Flag if local & unsaved
-                // Set position (handle both incoming formats)
-                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) { // Fallback for older format if needed
-                    loadedObject.position.set(objData.pos_x, objData.pos_y, objData.pos_z);
                 }
-                // Set rotation (handle both incoming formats)
-                if (objData.rotation && objData.rotation._x !== undefined) {
-                     loadedObject.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
-                } else if (objData.rot_x !== undefined) { // Fallback
-                     loadedObject.rotation.set(objData.rot_x, objData.rot_y, objData.rot_z, objData.rot_order || 'XYZ');
-                 }
-                // Add to scene
-                scene.add(loadedObject);
-                // Track if it's a new local object needing save
-                if (isNewlyPlaced) {
-                    newlyPlacedObjects.push(loadedObject);
-                    console.log(`Tracked new local object: ${objType} (${loadedObject.userData.obj_id}). Total unsaved: ${newlyPlacedObjects.length}`);
-                    // No session storage saving needed now, rely on polling/save button
                 }
-                return loadedObject;
             }
             return null;
         }
         // --- Object Creation Functions (Factories) ---
-        // Add castShadow = true to all relevant parts
-        function createObjectBase(type) {
-            return { userData: { type: type } }; // obj_id added later
-        }
-        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=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=false; 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=new THREE.Mesh(new THREE.IcosahedronGeometry(1.2,0),mat2); m2.position.y=2.8; m2.castShadow=true; m2.receiveShadow=false; group.add(m2); return group;
         }
-        function createRock() {
-            const base=createObjectBase("Rock"); const mat=new THREE.MeshStandardMaterial({color:0xaaaaaa,roughness:0.8,metalness:0.1});
-            const geo = new THREE.IcosahedronGeometry(0.7, 1); // Slightly more detail
-            geo.positionData = geo.attributes.position.array; // Deform geometry slightly
-             for (let i = 0; i < geo.positionData.length; i += 3) {
-                 const noise = Math.random() * 0.15 - 0.075; // Small random displacement
-                 geo.positionData[i] *= (1 + noise);
-                 geo.positionData[i+1] *= (1 + noise);
-                 geo.positionData[i+2] *= (1 + noise);
              }
-            geo.computeVertexNormals(); // Recalculate normals after deformation
-            const rock=new THREE.Mesh(geo,mat); Object.assign(rock,base);
-            rock.position.y=0.35; rock.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, Math.random()*Math.PI); rock.castShadow=true; rock.receiveShadow=true; return rock;
-        }
-        function createFencePost() {
-            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) {
-            // Calculate mouse position in normalized device coordinates (-1 to +1)
             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
             mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         }
@@ -365,36 +299,36 @@
         function onDocumentClick(event) {
             if (selectedObjectType === "None") return;
-            // Find all ground meshes (saved and placeholder)
             const groundCandidates = Object.values(groundMeshes);
-            if (groundCandidates.length === 0) return; // No ground to place on
             raycaster.setFromCamera(mouse, camera);
-            const intersects = raycaster.intersectObjects(groundCandidates); // Intersect with all ground planes
             if (intersects.length > 0) {
-                const intersectPoint = intersects[0].point; // Use the closest intersection point
-                const clickedGroundMesh = intersects[0].object; // The specific ground mesh clicked
-                // Create the object data structure first
                 const newObjData = {
-                    obj_id: THREE.MathUtils.generateUUID(), // Generate ID immediately
                     type: selectedObjectType,
-                    position: { x: intersectPoint.x, y: intersectPoint.y, z: intersectPoint.z }, // Y will be adjusted
-                    rotation: { _x: 0, _y: Math.random() * Math.PI * 2, _z: 0, _order: 'XYZ' } // Random Y rotation
                 };
-                 // Adjust Y position based on object type after creation, before adding to scene
-                 // (Example: ensures base is near y=0)
-                 // This logic might need refinement based on your object origins
-                 if(selectedObjectType === "Simple House") newObjData.position.y = 0;
-                 else if(selectedObjectType === "Tree") newObjData.position.y = 0;
-                 else if(selectedObjectType === "Rock") newObjData.position.y = 0; // Rock origin is center, adjust later maybe?
-                 else if(selectedObjectType === "Fence Post") newObjData.position.y = 0;
-                 // else default y = intersectPoint.y (which is ~0 on flat ground)
-                 // Now create the mesh and add it to the scene, marking as newly placed
-                 createAndPlaceObject(newObjData, true); // true = is newly placed
             }
         }
@@ -412,91 +346,53 @@
             if (playerMesh) {
                 playerMesh.position.x = targetX;
                 playerMesh.position.z = targetZ;
-                // Force camera update immediately after teleport
-                 const offset = new THREE.Vector3(0, 15, 20); // Keep consistent offset
-                 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."); }
         }
         // Called by Python's save button
-        function getNewlyPlacedObjectsForSave() {
-            console.log(`JS getNewlyPlacedObjectsForSave called. Found ${newlyPlacedObjects.length} objects.`);
-             // IMPORTANT: Send a *copy* of the data, not the live Three.js objects.
-             // Use WORLD coordinates as they are in the scene.
-            const dataToSend = newlyPlacedObjects.map(obj => {
                  if (!obj.userData || !obj.userData.type || !obj.userData.obj_id) return null;
                  return {
-                     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 }
                  };
-            }).filter(obj => obj !== null); // Filter out any potential nulls
-            console.log("Prepared data for saving:", dataToSend);
-             // Return as JSON string for streamlit_js_eval
-            return JSON.stringify(dataToSend);
         }
-        // Called by Python AFTER successful save and cache clear
         function resetNewlyPlacedObjects() {
             console.log(`JS resetNewlyPlacedObjects called.`);
-             // Objects just saved are now part of the authoritative state.
-             // They should NOT be tracked as 'newly placed' anymore.
-             // They will be handled by the regular sync process.
-             // We don't remove them from the scene here, sync will keep them.
-            newlyPlacedObjects.forEach(obj => {
-                if(obj.userData) obj.userData.isNewlyPlaced = false; // Mark them as not-new locally
-            });
-            newlyPlacedObjects = []; // Clear the local tracking array
-            // No need to clear session storage as we aren't using it now.
-             console.log("Local 'newly placed' object list cleared.");
         }
         // Called by Python when the selectbox changes
          function updateSelectedObjectType(newType) {
              console.log("JS updateSelectedObjectType received:", newType);
              selectedObjectType = newType;
-             // Optionally provide visual feedback (e.g., change cursor)
          }
-        // --- Polling Logic ---
-        function startPolling() {
-            if (pollIntervalId) {
-                clearInterval(pollIntervalId); // Clear existing interval if any
-            }
-            console.log(`Starting state polling every ${pollIntervalMs}ms`);
-            // Initial immediate poll request? Or wait for first interval? Wait seems fine.
-            pollIntervalId = setInterval(async () => {
-                // Check if the request function exists (it's set up by Python)
-                if (typeof window.requestStateUpdate === 'function') {
-                    try {
-                        console.log("Polling server for state update...");
-                        const latestState = await window.requestStateUpdate(); // Calls the Python function
-                        if (latestState && Array.isArray(latestState)) {
-                            // We got the state, synchronize the scene
-                            synchronizeWorldState(latestState);
-                        } else {
-                            console.warn("Polling received invalid state:", latestState);
-                        }
-                    } catch (error) {
-                        console.error("Error during state polling:", error);
-                        // Optional: Implement backoff or stop polling after too many errors
-                    }
-                } else {
-                    console.warn("window.requestStateUpdate function not available for polling yet.");
-                     // It might take a moment for streamlit_js_eval to set up the function
-                }
-            }, pollIntervalMs);
-        }
         // --- Animation Loop ---
         function updatePlayerMovement() {
             if (!playerMesh) return;
@@ -507,17 +403,15 @@
             if (keysPressed['KeyD'] || keysPressed['ArrowRight']) moveDirection.x += 1;
             if (moveDirection.lengthSq() > 0) {
-                 // Camera-relative movement
                 const forward = new THREE.Vector3(); camera.getWorldDirection(forward); forward.y = 0; forward.normalize();
                 const right = new THREE.Vector3().crossVectors(camera.up, forward).normalize();
                 const worldMove = new THREE.Vector3();
-                worldMove.add(forward.multiplyScalar(-moveDirection.z)); // W/S maps to camera forward/backward
-                worldMove.add(right.multiplyScalar(-moveDirection.x));   // A/D maps to camera left/right
                 worldMove.normalize().multiplyScalar(playerSpeed);
                 playerMesh.position.add(worldMove);
-                 // Basic ground clamping (replace with better physics later if needed)
-                 playerMesh.position.y = Math.max(playerMesh.position.y, 0.8); // Adjust based on player geometry origin
                 // Check if we need to create *placeholder* ground nearby
                 checkAndExpandGroundVisuals();
@@ -533,37 +427,28 @@
             for (let dx = -viewDistanceGrids; dx <= viewDistanceGrids; dx++) {
                 for (let dz = -viewDistanceGrids; dz <= viewDistanceGrids; dz++) {
-                    // if (dx === 0 && dz === 0) continue; // Check current cell too
                     const checkX = currentGridX + dx;
                     const checkZ = currentGridZ + dz;
                     const gridKey = `${checkX}_${checkZ}`;
-                    // If ground doesn't exist AT ALL for this grid key, create a placeholder
                     if (!groundMeshes[gridKey]) {
-                         // Check if it's actually a *saved* plot according to metadata
                          const isSaved = plotsMetadata.some(p => p.grid_x === checkX && p.grid_z === checkZ);
                          if (!isSaved) {
-                              // Only create placeholder if it's NOT a known saved plot
-                              // console.log(`Creating placeholder ground at ${gridKey}`); // Can be noisy
-                              createGroundPlane(checkX, checkZ, true); // true = is placeholder
                          }
-                         // If it IS saved but missing, the synchronizeWorldState/updateGround should handle it
                     }
                 }
             }
-             // Optional: Add logic here to *remove* distant placeholder ground meshes for performance
         }
         function updateCamera() {
             if (!playerMesh) return;
-            // Smooth follow camera
-            const offset = new THREE.Vector3(0, 12, 18); // Adjust offset for desired view
             const targetPosition = playerMesh.position.clone().add(offset);
-            // Use lerp for smooth camera movement
-            camera.position.lerp(targetPosition, 0.08); // Adjust lerp factor for smoothness (lower is smoother)
-            // Always look at the player's approximate head position
             const lookAtTarget = playerMesh.position.clone().add(new THREE.Vector3(0, 0.5, 0));
             camera.lookAt(lookAtTarget);
         }

 <!DOCTYPE html>
 <html>
 <head>
+    <title>Three.js Shared World (v2)</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
     <script type="module">
         import * as THREE from 'three';
         let scene, camera, renderer, playerMesh;
         let raycaster, mouse;
         // --- State Management ---
         let newlyPlacedObjects = []; // Track objects added THIS client, THIS session, NOT YET SAVED
+        const allLoadedObjects = new Map(); // Map<obj_id, THREE.Object3D> - ALL objects in the scene (initial + new)
+        const groundMeshes = {}; // Store references to ground meshes: 'x_z' string key -> mesh
+        // --- Session Storage Key for unsaved local changes ---
+        const SESSION_STORAGE_KEY = 'unsavedInfiniteWorldState_v2';
+        // --- Access State from Streamlit (Injected on page load/rerun) ---
+        const allInitialObjects = window.ALL_INITIAL_OBJECTS || []; // Authoritative state from server on load
         const plotsMetadata = window.PLOTS_METADATA || []; // List of saved plot info
+        let selectedObjectType = window.SELECTED_OBJECT_TYPE || "None"; // User's current tool
         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, name: "ground_saved"
         const placeholderGroundMaterial = new THREE.MeshStandardMaterial({
             color: 0x448844, roughness: 0.95, metalness: 0.1, side: THREE.DoubleSide, name: "ground_placeholder"
         });
         function init() {
             const aspect = window.innerWidth / window.innerHeight;
             camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 4000);
+            camera.position.set(plotWidth / 2, 15, plotDepth / 2 + 20);
             camera.lookAt(plotWidth/2, 0, plotDepth/2);
             scene.add(camera);
             setupLighting();
+            setupInitialGround(); // Based on plotsMetadata
             setupPlayer();
             raycaster = new THREE.Raycaster();
             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);
+            // --- Load Initial Objects from Server Injection ---
+            console.log(`Loading ${allInitialObjects.length} initial objects from Python.`);
+            allInitialObjects.forEach(objData => {
+                const mesh = createAndPlaceObject(objData, false); // false = not newly placed by this client session
+                if(mesh) {
+                    allLoadedObjects.set(mesh.userData.obj_id, mesh); // Track all objects
+                }
+            });
+            console.log("Finished loading initial objects.");
+            // --- Restore locally unsaved objects from sessionStorage ---
+            restoreUnsavedState(); // Add objects that were placed locally but not saved before a refresh
             // Event Listeners
             document.addEventListener('mousemove', onMouseMove, false);
             // --- Define global functions needed by Python ---
             window.teleportPlayer = teleportPlayer;
+            window.getSaveDataAndPosition = getSaveDataAndPosition; // For save button
             window.resetNewlyPlacedObjects = resetNewlyPlacedObjects; // Called by Python after successful save
+            window.updateSelectedObjectType = updateSelectedObjectType; // Called by Python selectbox change
+            console.log("Three.js Initialized. World ready.");
             animate();
         }
         function setupLighting() {
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
             scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
+            directionalLight.position.set(75, 150, 100);
             directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 2048;
             directionalLight.shadow.mapSize.height = 2048;
+            directionalLight.shadow.camera.near = 10;
             directionalLight.shadow.camera.far = 400;
+            directionalLight.shadow.camera.left = -150;
             directionalLight.shadow.camera.right = 150;
             directionalLight.shadow.camera.top = 150;
             directionalLight.shadow.camera.bottom = -150;
+            directionalLight.shadow.bias = -0.002;
             scene.add(directionalLight);
             const hemiLight = new THREE.HemisphereLight( 0xabcdef, 0x55aa55, 0.5 );
             scene.add( hemiLight );
         }
         function setupInitialGround() {
             console.log(`Setting up initial ground for ${plotsMetadata.length} saved plots.`);
             plotsMetadata.forEach(plot => {
+                createGroundPlane(plot.grid_x, plot.grid_z, false);
             });
             if (!groundMeshes['0_0']) {
+                 createGroundPlane(0, 0, false);
             }
+             // Also create placeholders around initial player position
+            checkAndExpandGroundVisuals();
         }
         function createGroundPlane(gridX, gridZ, isPlaceholder) {
             const gridKey = `${gridX}_${gridZ}`;
+            if (groundMeshes[gridKey]) return groundMeshes[gridKey];
             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;
             groundMesh.position.x = gridX * plotWidth + plotWidth / 2.0;
             groundMesh.position.z = gridZ * plotDepth + plotDepth / 2.0;
             groundMesh.receiveShadow = true;
             groundMesh.userData.gridKey = gridKey;
             groundMesh.userData.isPlaceholder = isPlaceholder;
             scene.add(groundMesh);
+            groundMeshes[gridKey] = groundMesh;
             return groundMesh;
         }
             const playerGeo = new THREE.CapsuleGeometry(0.4, 0.8, 4, 8);
             const playerMat = new THREE.MeshStandardMaterial({ color: 0x0055ff, roughness: 0.6 });
             playerMesh = new THREE.Mesh(playerGeo, playerMat);
+            playerMesh.position.set(plotWidth / 2, 0.8, plotDepth / 2);
             playerMesh.castShadow = true;
+            playerMesh.receiveShadow = false;
             scene.add(playerMesh);
         }
+        // Function to create object mesh based on data
+        // Returns the created mesh or null
+        function createAndPlaceObject(objData, isNewUnsavedObject) {
+            if (!objData || !objData.type || !objData.obj_id) {
+                 console.warn("Skipping object creation - Missing type or obj_id:", objData);
+                 return null;
             }
+             // Avoid recreating objects that already exist in the scene (e.g., from initial load + sessionStorage restore)
+             if (allLoadedObjects.has(objData.obj_id)) {
+                  console.log(`Object ${objData.obj_id} already exists. Skipping creation.`);
+                  // If restoring, ensure it's tracked in newlyPlacedObjects if it should be
+                  const existingMesh = allLoadedObjects.get(objData.obj_id);
+                  if (isNewUnsavedObject && !newlyPlacedObjects.some(o => o === existingMesh)) {
+                       newlyPlacedObjects.push(existingMesh);
+                       existingMesh.userData.isNewlyPlaced = true; // Ensure flag is set
+                  }
+                  return existingMesh;
+             }
+            let mesh = null;
             const objType = objData.type;
             switch (objType) {
+                case "Simple House": mesh = createSimpleHouse(); break;
+                case "Tree": mesh = createTree(); break;
+                case "Rock": mesh = createRock(); break;
+                case "Fence Post": mesh = createFencePost(); break;
                 default: console.warn("Unknown object type:", objType); return null;
             }
+            if (mesh) {
+                mesh.userData.obj_id = objData.obj_id; // Assign the ID from data
+                mesh.userData.type = objType;
+                mesh.userData.isNewlyPlaced = isNewUnsavedObject; // Mark if local & unsaved
+                if (objData.position) {
+                    mesh.position.set(objData.position.x, objData.position.y, objData.position.z);
+                }
+                if (objData.rotation) {
+                    mesh.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
                 }
+                scene.add(mesh);
+                allLoadedObjects.set(objData.obj_id, mesh); // Track it
+                if (isNewUnsavedObject) {
+                    newlyPlacedObjects.push(mesh);
+                    // console.log(`Tracked new local object: ${objType} (${mesh.userData.obj_id}). Total unsaved: ${newlyPlacedObjects.length}`);
                 }
+                return mesh;
             }
             return null;
         }
         // --- Object Creation Functions (Factories) ---
+        // (Keep your createSimpleHouse, createTree, createRock, createFencePost functions here)
+        // ... (same as previous versions) ...
+        function createObjectBase(type) { return { userData: { type: type } }; }
+        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=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=false; 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=new THREE.Mesh(new THREE.IcosahedronGeometry(1.2,0),mat2); m2.position.y=2.8; m2.castShadow=true; m2.receiveShadow=false; group.add(m2); return group; }
+        function createRock() { const base=createObjectBase("Rock"); const mat=new THREE.MeshStandardMaterial({color:0xaaaaaa,roughness:0.8,metalness:0.1}); const geo = new THREE.IcosahedronGeometry(0.7, 1); geo.positionData = geo.attributes.position.array; for (let i = 0; i < geo.positionData.length; i += 3) { const noise = Math.random() * 0.15 - 0.075; geo.positionData[i] *= (1 + noise); geo.positionData[i+1] *= (1 + noise); geo.positionData[i+2] *= (1 + noise); } geo.computeVertexNormals(); const rock=new THREE.Mesh(geo,mat); Object.assign(rock,base); rock.position.y=0.35; rock.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, Math.random()*Math.PI); rock.castShadow=true; rock.receiveShadow=true; return rock; }
+        function createFencePost() { 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; }
+        // --- Session Storage for Local Unsaved Changes ---
+        function saveUnsavedState() {
+            try {
+                // Only save objects marked as newly placed
+                const stateToSave = newlyPlacedObjects.map(obj => {
+                     if (!obj.userData || !obj.userData.type || !obj.userData.obj_id) return null;
+                     // Make sure we have the necessary info even if object creation failed partially
+                      if (!obj.position || !obj.rotation) return null;
+                     return {
+                         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 }
+                     };
+                 }).filter(obj => obj !== null); // Filter out any nulls from mapping failures
+                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);
+                 // Avoid breaking the app if sessionStorage fails (e.g., storage full, security settings)
+            }
         }
+        function restoreUnsavedState() {
+            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)) {
+                        let count = 0;
+                        objectsToRestore.forEach(objData => {
+                            // Create object, mark as 'isNewUnsavedObject = true'
+                            const mesh = createAndPlaceObject(objData, true);
+                            if(mesh) count++;
+                         });
+                        console.log(`Restored ${count} unsaved objects from sessionStorage.`);
+                    }
+                } else {
+                    console.log("No unsaved state found in sessionStorage.");
+                }
+            } catch (e) {
+                console.error("Error restoring state from sessionStorage:", e);
+                sessionStorage.removeItem(SESSION_STORAGE_KEY); // Clear potentially corrupted data
+            }
         }
+        function clearUnsavedState() {
+             try {
+                 sessionStorage.removeItem(SESSION_STORAGE_KEY);
+                 // Clear the tracking array
+                 newlyPlacedObjects = [];
+                 // Optionally reset the flag on meshes that were in the array (though they might be gone after rerun)
+                 // For safety, iterate the map and reset flags? Or rely on full reload. Let's rely on reload.
+                 console.log("Cleared unsaved state from memory and sessionStorage.");
+             } catch (e) {
+                  console.error("Error clearing sessionStorage:", e);
              }
         }
         // --- Event Handlers ---
         function onMouseMove(event) {
             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
             mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         }
         function onDocumentClick(event) {
             if (selectedObjectType === "None") return;
             const groundCandidates = Object.values(groundMeshes);
+            if (groundCandidates.length === 0) return;
             raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(groundCandidates);
             if (intersects.length > 0) {
+                const intersectPoint = intersects[0].point;
+                // Prepare object data with a new unique ID
                 const newObjData = {
+                    obj_id: THREE.MathUtils.generateUUID(), // New ID for every placement
                     type: selectedObjectType,
+                    position: { x: intersectPoint.x, y: 0, z: intersectPoint.z }, // Start at y=0 on the ground plane
+                    rotation: { _x: 0, _y: Math.random() * Math.PI * 2, _z: 0, _order: 'XYZ' }
                 };
+                // Adjust Y based on object type (move this logic inside createAndPlaceObject?)
+                // If object's origin isn't its base, adjust here or in the factory.
+                // Let's assume factories place objects with base near Y=0 for simplicity.
+                // Example: If rock center is at 0,0,0 in its local space, need to lift it.
+                 if(selectedObjectType === "Rock") newObjData.position.y = 0.35; // Lift rock slightly
+                 else if (selectedObjectType === "Fence Post") newObjData.position.y = 0; // Origin is likely base
+                 // Add other adjustments if needed
+                const newMesh = createAndPlaceObject(newObjData, true); // true = is newly placed & unsaved
+                if (newMesh) {
+                     saveUnsavedState(); // Save to sessionStorage immediately after placing
+                }
             }
         }
             if (playerMesh) {
                 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."); }
         }
         // Called by Python's save button
+        function getSaveDataAndPosition() {
+            console.log(`JS getSaveDataAndPosition called. Found ${newlyPlacedObjects.length} new local objects.`);
+            // Prepare data for the objects marked as 'newlyPlaced'
+            const objectsToSave = newlyPlacedObjects.map(obj => {
                  if (!obj.userData || !obj.userData.type || !obj.userData.obj_id) return null;
                  return {
+                     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 }
                  };
+            }).filter(obj => obj !== null); // Filter out any nulls
+            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 // This list contains only the locally added, unsaved objects
+            };
+            console.log("Prepared payload for saving:", payload);
+            return JSON.stringify(payload); // Return as JSON string
         }
+        // Called by Python AFTER successful save and merge
         function resetNewlyPlacedObjects() {
             console.log(`JS resetNewlyPlacedObjects called.`);
+            // Clear the tracking array AND the sessionStorage backup
+            clearUnsavedState();
+            // The objects themselves remain in the scene until the next Python rerun/refresh
+            // At which point they will be loaded as part of ALL_INITIAL_OBJECTS
         }
         // Called by Python when the selectbox changes
          function updateSelectedObjectType(newType) {
              console.log("JS updateSelectedObjectType received:", newType);
              selectedObjectType = newType;
          }
         // --- Animation Loop ---
         function updatePlayerMovement() {
             if (!playerMesh) return;
             if (keysPressed['KeyD'] || keysPressed['ArrowRight']) moveDirection.x += 1;
             if (moveDirection.lengthSq() > 0) {
                 const forward = new THREE.Vector3(); camera.getWorldDirection(forward); forward.y = 0; forward.normalize();
                 const right = new THREE.Vector3().crossVectors(camera.up, forward).normalize();
                 const worldMove = new THREE.Vector3();
+                worldMove.add(forward.multiplyScalar(-moveDirection.z));
+                worldMove.add(right.multiplyScalar(-moveDirection.x));
                 worldMove.normalize().multiplyScalar(playerSpeed);
                 playerMesh.position.add(worldMove);
+                playerMesh.position.y = Math.max(playerMesh.position.y, 0.8); // Ground clamp
                 // Check if we need to create *placeholder* ground nearby
                 checkAndExpandGroundVisuals();
             for (let dx = -viewDistanceGrids; dx <= viewDistanceGrids; dx++) {
                 for (let dz = -viewDistanceGrids; dz <= viewDistanceGrids; dz++) {
                     const checkX = currentGridX + dx;
                     const checkZ = currentGridZ + dz;
                     const gridKey = `${checkX}_${checkZ}`;
                     if (!groundMeshes[gridKey]) {
                          const isSaved = plotsMetadata.some(p => p.grid_x === checkX && p.grid_z === checkZ);
                          if (!isSaved) {
+                              createGroundPlane(checkX, checkZ, true);
                          }
+                         // If it IS saved but missing, Python rerun should inject it later
                     }
                 }
             }
+            // Optional: Remove distant placeholders
         }
         function updateCamera() {
             if (!playerMesh) return;
+            const offset = new THREE.Vector3(0, 12, 18);
             const targetPosition = playerMesh.position.clone().add(offset);
+            camera.position.lerp(targetPosition, 0.08);
             const lookAtTarget = playerMesh.position.clone().add(new THREE.Vector3(0, 0.5, 0));
             camera.lookAt(lookAtTarget);
         }