Spaces:

awacke1
/

Happy-Valley-Game

Sleeping

App Files Files Community

awacke1 commited on Apr 6

Commit

3a030e4

verified ·

1 Parent(s): c910728

Update index.html

Browse files

Files changed (1) hide show

index.html +428 -128

index.html CHANGED Viewed

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Three.js Infinite World</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
     </style>
-</head>
 <body>
     <script type="importmap">
         {
@@ -19,25 +19,36 @@
     <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
-        // --- Access State from Streamlit ---
-        const allInitialObjects = window.ALL_INITIAL_OBJECTS || [];
-        const plotsMetadata = window.PLOTS_METADATA || [];
-        const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
         const plotWidth = window.PLOT_WIDTH || 50.0;
         const plotDepth = window.PLOT_DEPTH || 50.0;
-        const globalState = window.GLOBAL_STATE || { objects: [] };
-        // --- Setup materials and scene
         const groundMaterial = new THREE.MeshStandardMaterial({
-             color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide
         });
         function init() {
             scene = new THREE.Scene();
@@ -45,12 +56,12 @@
             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();
@@ -59,225 +70,514 @@
             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();
             // 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 for Streamlit callbacks.
             window.teleportPlayer = teleportPlayer;
-            window.getSaveDataAndPosition = getSaveDataAndPosition;
-            window.resetNewlyPlacedObjects = resetNewlyPlacedObjects;
-            console.log("Three.js Initialized. World ready.");
             animate();
         }
         function setupLighting() {
-            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);
             directionalLight.castShadow = true;
-            directionalLight.shadow.mapSize.width = 4096;
-            directionalLight.shadow.mapSize.height = 4096;
-            directionalLight.shadow.camera.near = 0.5;
-            directionalLight.shadow.camera.far = 500;
-            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() {
-            console.log(`Setting up initial ground for ${plotsMetadata.length} plots.`);
             plotsMetadata.forEach(plot => {
-                createGroundPlane(plot.grid_x, plot.grid_z, false);
             });
-            if (plotsMetadata.length === 0) {
-                createGroundPlane(0, 0, false);
             }
         }
         function createGroundPlane(gridX, gridZ, isPlaceholder) {
             const gridKey = `${gridX}_${gridZ}`;
             const groundGeometry = new THREE.PlaneGeometry(plotWidth, plotDepth);
-            const material = groundMaterial;
             const groundMesh = new THREE.Mesh(groundGeometry, material);
             groundMesh.rotation.x = -Math.PI / 2;
-            groundMesh.position.x = gridX * plotWidth + plotWidth / 2;
-            groundMesh.position.z = gridZ * plotDepth + plotDepth / 2;
             groundMesh.receiveShadow = true;
             scene.add(groundMesh);
         }
         function setupPlayer() {
             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, 1, plotDepth/2);
             playerMesh.castShadow = true;
             scene.add(playerMesh);
         }
-        function loadInitialObjects() {
-            console.log(`Loading ${allInitialObjects.length} initial objects from Python.`);
-            allInitialObjects.forEach(objData => { createAndPlaceObject(objData, false); });
-            // Also load objects from the global state (if any).
-            console.log(`Loading ${globalState.objects ? globalState.objects.length : 0} objects from global state.`);
-            if(globalState.objects) {
-                globalState.objects.forEach(objData => { createAndPlaceObject(objData, false); });
             }
-            console.log("Finished loading objects.");
         }
-        function createAndPlaceObject(objData, isNewObject) {
             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:", objData.type); break;
             }
             if (loadedObject) {
-                // Prefer properties from objData using either new or old key names.
-                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;
         }
-        // Sample object creation functions.
         function createSimpleHouse() {
-            const group = new THREE.Group();
-            const mat1 = new THREE.MeshStandardMaterial({color:0xffccaa});
-            const m1 = new THREE.Mesh(new THREE.BoxGeometry(2,1.5,2.5), mat1);
-            m1.position.y = 0.75;
-            group.add(m1);
-            return group;
         }
         function createTree() {
-            const group = new THREE.Group();
-            const mat1 = new THREE.MeshStandardMaterial({color:0x8B4513});
-            const m1 = new THREE.Mesh(new THREE.CylinderGeometry(0.3,0.4,2,8), mat1);
-            m1.position.y = 1;
-            group.add(m1);
-            const mat2 = new THREE.MeshStandardMaterial({color:0x228B22});
-            const m2 = new THREE.Mesh(new THREE.IcosahedronGeometry(1.2,0), mat2);
-            m2.position.y = 2.8;
-            group.add(m2);
-            return group;
         }
         function createRock() {
-            const mat = new THREE.MeshStandardMaterial({color:0xaaaaaa});
-            const rock = new THREE.Mesh(new THREE.IcosahedronGeometry(0.7,0), mat);
-            rock.position.y = 0.35;
-            rock.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, 0);
-            return rock;
         }
         function createFencePost() {
-            const mat = new THREE.MeshStandardMaterial({color:0xdeb887});
-            const post = new THREE.Mesh(new THREE.BoxGeometry(0.2,1.5,0.2), mat);
-            post.position.y = 0.75;
-            return post;
         }
         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;
             raycaster.setFromCamera(mouse, camera);
-            const intersects = raycaster.intersectObjects(scene.children);
             if (intersects.length > 0) {
-                const intersectPoint = intersects[0].point;
-                let newObject = null;
-                switch (selectedObjectType) {
-                    case "Simple House": newObject = createSimpleHouse(); break;
-                    case "Tree": newObject = createTree(); break;
-                    case "Rock": newObject = createRock(); break;
-                    case "Fence Post": newObject = createFencePost(); break;
-                    default: return;
-                }
-                if (newObject) {
-                    newObject.position.copy(intersectPoint);
-                    scene.add(newObject);
-                    newlyPlacedObjects.push(newObject);
-                    console.log(`Placed new ${selectedObjectType}. Total new objects: ${newlyPlacedObjects.length}`);
-                }
             }
         }
         function onKeyDown(event) { keysPressed[event.code] = true; }
         function onKeyUp(event) { keysPressed[event.code] = false; }
         function teleportPlayer(targetX, targetZ) {
             if (playerMesh) {
                 playerMesh.position.x = targetX;
                 playerMesh.position.z = targetZ;
-                camera.position.x = targetX;
-                camera.position.z = targetZ + 20;
-                console.log("Player teleported.");
-            }
         }
-        // This function packages new object data and player position for Streamlit.
-        function getSaveDataAndPosition() {
-            const objectsToSave = newlyPlacedObjects.map(obj => {
-                return {
-                    obj_id: obj.userData.obj_id,
-                    type: selectedObjectType,
-                    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 }
-                };
-            });
-            // Use the player mesh's position as the player position.
-            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:", payload);
-            // Clear newlyPlacedObjects after packaging.
-            newlyPlacedObjects = [];
-            return JSON.stringify(payload);
         }
         function resetNewlyPlacedObjects() {
-            newlyPlacedObjects = [];
         }
         function animate() {
             requestAnimationFrame(animate);
             renderer.render(scene, camera);
         }
         init();
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html>
 <head>
+    <title>Three.js Shared World</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
     </style>
+    </head>
 <body>
     <script type="importmap">
         {
     <script type="module">
         import * as THREE from 'three';
+        // No OrbitControls needed if using custom player movement
         let scene, camera, renderer, playerMesh;
         let raycaster, mouse;
         const keysPressed = {};
         const playerSpeed = 0.15;
+        // --- 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"
         });
+        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() {
             scene = new THREE.Scene();
             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();
             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);
+            document.addEventListener('click', onDocumentClick, false); // Place object
             window.addEventListener('resize', onWindowResize, false);
             document.addEventListener('keydown', onKeyDown);
             document.addEventListener('keyup', onKeyUp);
+            // --- 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 );
         }
         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;
         }
         function setupPlayer() {
             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;
         }
         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
             }
         }
         function onKeyDown(event) { keysPressed[event.code] = true; }
         function onKeyUp(event) { keysPressed[event.code] = false; }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        // --- Functions called by Python ---
         function teleportPlayer(targetX, targetZ) {
+            console.log(`JS teleportPlayer called: x=${targetX}, z=${targetZ}`);
             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;
+            const moveDirection = new THREE.Vector3(0, 0, 0);
+            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) {
+                 // 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();
+            }
+        }
+        // Create visual placeholder ground dynamically
+        function checkAndExpandGroundVisuals() {
+            if (!playerMesh) return;
+            const currentGridX = Math.floor(playerMesh.position.x / plotWidth);
+            const currentGridZ = Math.floor(playerMesh.position.z / plotDepth);
+            const viewDistanceGrids = 2; // How many grids away to check/create placeholders
+            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);
         }
         function animate() {
             requestAnimationFrame(animate);
+            updatePlayerMovement();
+            updateCamera();
             renderer.render(scene, camera);
         }
+        // --- Start ---
         init();
     </script>
 </body>
+</html>