Spaces:

awacke1
/

Happy-Valley-Game

Sleeping

App Files Files Community

awacke1 commited on Apr 6

Commit

04b8433

verified ·

1 Parent(s): 836475d

Update index.html

Browse files

Files changed (1) hide show

index.html +408 -328

index.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Three.js Shared World (v2)</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
@@ -25,27 +25,38 @@
         const keysPressed = {};
         const playerSpeed = 0.15;
-        // --- 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() {
@@ -53,13 +64,14 @@
             scene.background = new THREE.Color(0xabcdef);
             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();
@@ -71,18 +83,8 @@
             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);
@@ -93,211 +95,371 @@
             // --- 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;
-        }
-        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);
-            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;
@@ -308,149 +470,67 @@
             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
-                }
-            }
-        }
-        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;
-                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;
-            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) {
-                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();
-            }
         }
-        // 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++) {
-                    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);
         }
         function animate() {

 <!DOCTYPE html>
 <html>
 <head>
+    <title>Shared World Builder</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
         const keysPressed = {};
         const playerSpeed = 0.15;
+        // --- World State (Managed by Server via WebSocket) ---
+        const worldObjects = new Map(); // Map<obj_id, THREE.Object3D>
+        const groundMeshes = {}; // Map<gridKey, THREE.Mesh>
+        // --- WebSocket ---
+        let socket = null;
+        let connectionRetries = 0;
+        const MAX_RETRIES = 5;
+        // --- Access State from Streamlit (Injected) ---
+        const myUsername = window.USERNAME || `User_${Math.random().toString(36).substring(2, 6)}`;
+        const websocketUrl = window.WEBSOCKET_URL || "ws://localhost:8765";
+        let selectedObjectType = window.SELECTED_OBJECT_TYPE || "None"; // Can be updated
         const plotWidth = window.PLOT_WIDTH || 50.0;
         const plotDepth = window.PLOT_DEPTH || 50.0;
+        // --- Materials ---
+        const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide });
+        const placeholderGroundMaterial = new THREE.MeshStandardMaterial({ color: 0x448844, roughness: 0.95, metalness: 0.1, side: THREE.DoubleSide });
+        // Basic material cache/reuse
+        const objectMaterials = {
+            'wood': new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.9 }),
+            'leaf': new THREE.MeshStandardMaterial({ color: 0x228B22, roughness: 0.8 }),
+            'stone': new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.8, metalness: 0.1 }),
+            'house_wall': new THREE.MeshStandardMaterial({ color: 0xffccaa, roughness: 0.8 }),
+            'house_roof': new THREE.MeshStandardMaterial({ color: 0xaa5533, roughness: 0.7 }),
+            'brick': new THREE.MeshStandardMaterial({ color: 0x9B4C43, roughness: 0.85 }),
+            'metal': new THREE.MeshStandardMaterial({ color: 0xcccccc, roughness: 0.4, metalness: 0.8 }),
+            'gem': new THREE.MeshStandardMaterial({ color: 0x4FFFFF, roughness: 0.1, metalness: 0.2, transparent: true, opacity: 0.8 }),
+            'light': new THREE.MeshBasicMaterial({ color: 0xFFFF88 }), // For light sources
+            // Add more reusable materials
+        };
         function init() {
             scene.background = new THREE.Color(0xabcdef);
             const aspect = window.innerWidth / window.innerHeight;
+            camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 5000); // Increased far plane
             camera.position.set(plotWidth / 2, 15, plotDepth / 2 + 20);
             camera.lookAt(plotWidth/2, 0, plotDepth/2);
             scene.add(camera);
             setupLighting();
+            // Don't setup initial ground here, wait for WebSocket initial state? Or create base?
+            createGroundPlane(0, 0, false); // Create the origin ground at least
             setupPlayer();
             raycaster = new THREE.Raycaster();
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.body.appendChild(renderer.domElement);
+            // --- Initialize WebSocket Connection ---
+            connectWebSocket();
             // Event Listeners
             document.addEventListener('mousemove', onMouseMove, false);
             // --- Define global functions needed by Python ---
             window.teleportPlayer = teleportPlayer;
+            // Removed getSaveDataAndPosition - saving now server-side via WS
+            // Removed resetNewlyPlacedObjects - no longer needed
+            window.updateSelectedObjectType = updateSelectedObjectType; // Still needed
+            console.log(`Three.js Initialized for user: ${myUsername}. Connecting to ${websocketUrl}...`);
             animate();
         }
+        // --- WebSocket Logic ---
+        function connectWebSocket() {
+            console.log("Attempting WebSocket connection...");
+            socket = new WebSocket(websocketUrl);
+            socket.onopen = () => {
+                console.log("WebSocket connection established.");
+                connectionRetries = 0;
+                // Request initial state? Server sends it automatically now.
+                // socket.send(JSON.stringify({ type: "request_initial_state" }));
+            };
+            socket.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    // console.log("WebSocket message received:", data); // Debugging
+                    handleWebSocketMessage(data);
+                } catch (e) {
+                    console.error("Failed to parse WebSocket message:", event.data, e);
+                }
+            };
+            socket.onerror = (error) => {
+                console.error("WebSocket error:", error);
+                // Consider showing an error message to the user in Streamlit?
+            };
+            socket.onclose = (event) => {
+                console.warn(`WebSocket connection closed. Code: ${event.code}, Reason: ${event.reason}. Clean: ${event.wasClean}`);
+                socket = null;
+                // Implement reconnection strategy
+                if (connectionRetries < MAX_RETRIES) {
+                    connectionRetries++;
+                    const delay = Math.pow(2, connectionRetries) * 1000; // Exponential backoff
+                    console.log(`Attempting reconnection in ${delay / 1000}s...`);
+                    setTimeout(connectWebSocket, delay);
+                } else {
+                    console.error("WebSocket reconnection failed after max retries.");
+                    // Inform user connection lost - maybe via Streamlit call?
+                }
+            };
         }
+        function sendWebSocketMessage(type, payload) {
+            if (socket && socket.readyState === WebSocket.OPEN) {
+                const message = JSON.stringify({ type, payload });
+                socket.send(message);
+            } else {
+                console.warn("WebSocket not open. Message not sent:", type, payload);
+                // Optionally queue messages to send on reconnect?
             }
+        }
+        function handleWebSocketMessage(data) {
+            const { type, payload } = data;
+            switch (type) {
+                case "initial_state":
+                    console.log(`Received initial world state with ${Object.keys(payload).length} objects.`);
+                    // Clear existing objects (except player?) before loading initial state
+                    clearWorldObjects();
+                    for (const obj_id in payload) {
+                        createAndPlaceObject(payload[obj_id], false); // false = not newly placed
+                    }
+                    // Setup ground based on loaded objects' positions? Or separate metadata needed?
+                    // For now, rely on dynamic ground expansion.
+                    break;
+                case "object_placed":
+                     console.log(`Object placed by ${payload.username}:`, payload.object_data);
+                     // Add or update the object in the scene
+                     createAndPlaceObject(payload.object_data, false); // false = not newly placed by *this* client
+                     break;
+                case "object_deleted":
+                    console.log(`Object deleted by ${payload.username}:`, payload.obj_id);
+                    removeObjectById(payload.obj_id);
+                    break;
+                case "user_join":
+                     console.log(`User joined: ${payload.username} (${payload.id})`);
+                     // Optionally display user join message in chat tab or 3D world?
+                     break;
+                case "user_leave":
+                     console.log(`User left: ${payload.username} (${payload.id})`);
+                     // Optionally display user leave message
+                     break;
+                case "user_rename":
+                     console.log(`User ${payload.old_username} is now ${payload.new_username}`);
+                     break;
+                 case "chat_message":
+                      console.log(`Chat from ${payload.username}: ${payload.message}`);
+                      // Handle displaying chat in the Streamlit Chat tab (Python side handles this)
+                      break;
+                // Add handlers for other message types
+                default:
+                    console.warn("Received unknown WebSocket message type:", type);
             }
+        }
+        function clearWorldObjects() {
+             console.log("Clearing existing world objects...");
+             for (const [obj_id, mesh] of worldObjects.entries()) {
+                 scene.remove(mesh);
+                 // Optional: Dispose geometry/material for memory management
+                 // disposeObject3D(mesh);
+             }
+             worldObjects.clear();
+             // Also clear ground meshes? Or keep them? Keep for now.
+        }
+        function removeObjectById(obj_id) {
+             if (worldObjects.has(obj_id)) {
+                  const mesh = worldObjects.get(obj_id);
+                  scene.remove(mesh);
+                  // disposeObject3D(mesh); // Optional cleanup
+                  worldObjects.delete(obj_id);
+                  console.log(`Removed object ${obj_id} from scene.`);
+             } else {
+                  console.warn(`Attempted to remove non-existent object ID: ${obj_id}`);
+             }
+        }
+        // --- Standard Setup Functions ---
+        function setupLighting() { /* ... (Keep as before) ... */
+            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 setupPlayer() { /* ... (Keep as before) ... */
+             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 createGroundPlane(gridX, gridZ, isPlaceholder) { /* ... (Keep as before) ... */
+            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;
+         }
+        // --- Object Creation & Placement (Modified for WebSocket & New Primitives) ---
+        // Central function to add/update objects based on data
+        function createAndPlaceObject(objData, isNewlyPlacedLocally) { // isNewlyPlacedLocally not really used now
+            if (!objData || !objData.obj_id || !objData.type) {
+                console.warn("Invalid object data:", objData);
+                return null;
             }
+            // Check if object already exists (update vs create)
+            let mesh = worldObjects.get(objData.obj_id);
+            let isNew = false;
+            if (mesh) {
+                 // Update existing mesh position/rotation if different
+                 if (mesh.position.distanceToSquared(objData.position) > 0.001) {
+                      mesh.position.set(objData.position.x, objData.position.y, objData.position.z);
+                 }
+                 if (objData.rotation && (
+                      Math.abs(mesh.rotation.x - objData.rotation._x) > 0.01 ||
+                      Math.abs(mesh.rotation.y - objData.rotation._y) > 0.01 ||
+                      Math.abs(mesh.rotation.z - objData.rotation._z) > 0.01 )) {
+                       mesh.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
+                 }
+                 // Could add logic here to update geometry/material if type changes? Unlikely.
+                 // console.log(`Updated object ${objData.obj_id}`);
+            } else {
+                 // Create new mesh
+                 mesh = createPrimitiveMesh(objData.type); // Use the new factory function
+                 if (!mesh) return null; // Failed to create mesh type
+                 isNew = true;
+                 mesh.userData.obj_id = objData.obj_id; // Assign ID from data
+                 mesh.userData.type = objData.type;
+                 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);
+                 worldObjects.set(objData.obj_id, mesh); // Add to our map
+                 // console.log(`Created new object ${objData.obj_id} (${objData.type})`);
             }
+            return mesh;
         }
+        // Factory function for creating meshes based on type name
+        function createPrimitiveMesh(type) {
+            let mesh = null;
+            let geometry, material, material2; // Declare vars
+            // Use reusable materials where possible
+            const wood = objectMaterials.wood;
+            const leaf = objectMaterials.leaf;
+            const stone = objectMaterials.stone;
+            const house_wall = objectMaterials.house_wall;
+            const house_roof = objectMaterials.house_roof;
+            const brick = objectMaterials.brick;
+            const metal = objectMaterials.metal;
+            const gem = objectMaterials.gem;
+            const lightMat = objectMaterials.light;
+            try { // Wrap in try-catch for safety if geometry fails
+                switch(type) {
+                    // --- Original Primitives ---
+                    case "Tree":
+                        mesh = new THREE.Group();
+                        geometry = new THREE.CylinderGeometry(0.3, 0.4, 2, 8); material = wood;
+                        const trunk = new THREE.Mesh(geometry, material); trunk.position.y = 1; trunk.castShadow=true; trunk.receiveShadow=true; mesh.add(trunk);
+                        geometry = new THREE.IcosahedronGeometry(1.2, 0); material = leaf;
+                        const canopy = new THREE.Mesh(geometry, material); canopy.position.y = 2.8; canopy.castShadow=true; canopy.receiveShadow=false; mesh.add(canopy);
+                        break;
+                    case "Rock":
+                        geometry = new THREE.IcosahedronGeometry(0.7, 1); material = stone;
+                        // Optional: Deform geometry slightly (can be slow if done often)
+                        mesh = new THREE.Mesh(geometry, material); mesh.castShadow = true; mesh.receiveShadow = true;
+                        mesh.scale.set(1, Math.random()*0.4 + 0.8, 1); // Vary shape slightly
+                        break;
+                    case "Simple House":
+                        mesh = new THREE.Group();
+                        geometry = new THREE.BoxGeometry(2, 1.5, 2.5); material = house_wall;
+                        const body = new THREE.Mesh(geometry, material); body.position.y = 0.75; body.castShadow = true; body.receiveShadow = true; mesh.add(body);
+                        geometry = new THREE.ConeGeometry(1.8, 1, 4); material = house_roof;
+                        const roof = new THREE.Mesh(geometry, material); roof.position.y = 1.5 + 0.5; roof.rotation.y = Math.PI / 4; roof.castShadow = true; roof.receiveShadow = false; mesh.add(roof);
+                        break;
+                    case "Fence Post": // Keep original simple fence post
+                        geometry = new THREE.BoxGeometry(0.2, 1.5, 0.2); material = wood;
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.75; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    // --- New Primitives ---
+                    case "Pine Tree": // Example: Cone for canopy
+                        mesh = new THREE.Group();
+                        geometry = new THREE.CylinderGeometry(0.2, 0.3, 2.5, 8); material = wood;
+                        const pineTrunk = new THREE.Mesh(geometry, material); pineTrunk.position.y = 1.25; pineTrunk.castShadow=true; pineTrunk.receiveShadow=true; mesh.add(pineTrunk);
+                        geometry = new THREE.ConeGeometry(1, 2.5, 8); material = leaf;
+                        const pineCanopy = new THREE.Mesh(geometry, material); pineCanopy.position.y = 2.5 + (2.5/2) - 0.5; pineCanopy.castShadow=true; pineCanopy.receiveShadow=false; mesh.add(pineCanopy);
+                        break;
+                    case "Brick Wall": // Simple box with brick color
+                        geometry = new THREE.BoxGeometry(3, 2, 0.3); material = brick;
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 1; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Sphere":
+                        geometry = new THREE.SphereGeometry(0.8, 16, 12); material = metal;
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.8; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Cube": // Simple cube
+                        geometry = new THREE.BoxGeometry(1, 1, 1); material = stone; // Re-use stone
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.5; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Cylinder":
+                        geometry = new THREE.CylinderGeometry(0.5, 0.5, 1.5, 16); material = metal;
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.75; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Cone":
+                        geometry = new THREE.ConeGeometry(0.6, 1.2, 16); material = house_roof; // Re-use roof
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.6; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Torus": // Donut shape
+                        geometry = new THREE.TorusGeometry(0.6, 0.2, 8, 24); material = gem; // Use gem material
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.7; mesh.castShadow = true; mesh.receiveShadow = true;
+                         mesh.rotation.x = Math.PI / 2; // Stand it up
+                        break;
+                    case "Mushroom":
+                         mesh = new THREE.Group();
+                         geometry = new THREE.CylinderGeometry(0.15, 0.1, 0.6, 8); material = house_wall; // Cream stem
+                         const stem = new THREE.Mesh(geometry, material); stem.position.y = 0.3; stem.castShadow = true; stem.receiveShadow = true; mesh.add(stem);
+                         geometry = new THREE.SphereGeometry(0.4, 16, 8, 0, Math.PI * 2, 0, Math.PI / 2); material = house_roof; // Red cap
+                         const cap = new THREE.Mesh(geometry, material); cap.position.y = 0.6; cap.castShadow = true; cap.receiveShadow = false; mesh.add(cap);
+                         break;
+                    case "Cactus": // Simple segmented cactus
+                        mesh = new THREE.Group(); material = leaf; // Green material
+                        geometry = new THREE.CylinderGeometry(0.3, 0.3, 1.5, 8);
+                        const main = new THREE.Mesh(geometry, material); main.position.y = 0.75; main.castShadow = true; main.receiveShadow = true; mesh.add(main);
+                        geometry = new THREE.CylinderGeometry(0.2, 0.2, 0.8, 8);
+                        const arm1 = new THREE.Mesh(geometry, material); arm1.position.set(0.3, 1, 0); arm1.rotation.z = Math.PI / 4; arm1.castShadow = true; arm1.receiveShadow = true; mesh.add(arm1);
+                        const arm2 = new THREE.Mesh(geometry, material); arm2.position.set(-0.3, 0.8, 0); arm2.rotation.z = -Math.PI / 4; arm2.castShadow = true; arm2.receiveShadow = true; mesh.add(arm2);
+                        break;
+                    case "Campfire":
+                         mesh = new THREE.Group();
+                         material = wood; geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.8, 5);
+                         const log1 = new THREE.Mesh(geometry, material); log1.rotation.x = Math.PI/2; log1.position.set(0, 0.1, 0.2); mesh.add(log1);
+                         const log2 = new THREE.Mesh(geometry, material); log2.rotation.set(Math.PI/2, 0, Math.PI/3); log2.position.set(0.2*Math.cos(Math.PI/6), 0.1, -0.2*Math.sin(Math.PI/6)); mesh.add(log2);
+                         const log3 = new THREE.Mesh(geometry, material); log3.rotation.set(Math.PI/2, 0, -Math.PI/3); log3.position.set(-0.2*Math.cos(Math.PI/6), 0.1, -0.2*Math.sin(Math.PI/6)); mesh.add(log3);
+                         material2 = lightMat; geometry = new THREE.ConeGeometry(0.2, 0.5, 8); // Simple flame
+                         const flame = new THREE.Mesh(geometry, material2); flame.position.y = 0.35; mesh.add(flame);
+                         // Add shadows later if needed
+                         break;
+                    case "Star":
+                         geometry = new THREE.SphereGeometry(0.5, 4, 2); // Low poly sphere looks star-like
+                         material = lightMat;
+                         mesh = new THREE.Mesh(geometry, material); mesh.position.y = 1;
+                         break;
+                    case "Gem":
+                         geometry = new THREE.OctahedronGeometry(0.6, 0); material = gem;
+                         mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.6; mesh.castShadow = true; mesh.receiveShadow = true;
+                         break;
+                    case "Tower": // Simple cylinder tower
+                         geometry = new THREE.CylinderGeometry(1, 1.2, 5, 8); material = stone;
+                         mesh = new THREE.Mesh(geometry, material); mesh.position.y = 2.5; mesh.castShadow = true; mesh.receiveShadow = true;
+                         break;
+                    case "Barrier": // Simple box barrier
+                         geometry = new THREE.BoxGeometry(2, 0.5, 0.5); material = metal;
+                         mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.25; mesh.castShadow = true; mesh.receiveShadow = true;
+                         break;
+                     case "Fountain": // Placeholder: Tiered cylinders
+                          mesh = new THREE.Group(); material = stone;
+                          geometry = new THREE.CylinderGeometry(1.5, 1.5, 0.3, 16);
+                          const baseF = new THREE.Mesh(geometry, material); baseF.position.y = 0.15; mesh.add(baseF);
+                          geometry = new THREE.CylinderGeometry(0.8, 0.8, 0.5, 16);
+                          const midF = new THREE.Mesh(geometry, material); midF.position.y = 0.3+0.25; mesh.add(midF);
+                           geometry = new THREE.CylinderGeometry(0.4, 0.4, 0.7, 16);
+                          const topF = new THREE.Mesh(geometry, material); topF.position.y = 0.8+0.35; mesh.add(topF);
+                          mesh.castShadow = true; mesh.receiveShadow = true; // Apply to group?
+                          break;
+                     case "Lantern":
+                          mesh = new THREE.Group(); material = metal;
+                          geometry = new THREE.BoxGeometry(0.4, 0.6, 0.4);
+                          const bodyL = new THREE.Mesh(geometry, material); bodyL.position.y = 0.3; mesh.add(bodyL);
+                           geometry = new THREE.SphereGeometry(0.15); material2 = lightMat;
+                          const lightL = new THREE.Mesh(geometry, material2); lightL.position.y = 0.3; mesh.add(lightL);
+                           mesh.castShadow = true; // Group casts shadow?
+                           break;
+                     case "Sign Post":
+                           mesh = new THREE.Group(); material = wood;
+                           geometry = new THREE.CylinderGeometry(0.05, 0.05, 1.8, 8);
+                           const postS = new THREE.Mesh(geometry, material); postS.position.y = 0.9; mesh.add(postS);
+                           geometry = new THREE.BoxGeometry(0.8, 0.4, 0.05);
+                           const signS = new THREE.Mesh(geometry, material); signS.position.y = 1.5; mesh.add(signS);
+                           mesh.castShadow = true; mesh.receiveShadow = true;
+                           break;
+                    default:
+                        console.warn("Unknown primitive type for mesh creation:", type);
+                        return null; // Return null if type not found
                 }
             } catch (e) {
+                console.error(`Error creating geometry/mesh for type ${type}:`, e);
+                return null;
             }
+            // Common post-creation steps (if mesh created)
+            if (mesh) {
+                // Set default userData structure (will be overwritten by createAndPlaceObject)
+                mesh.userData = { type: type };
+                // Ensure position is defaulted reasonably if created standalone
+                if (!mesh.position.y && mesh.geometry) {
+                     mesh.geometry.computeBoundingBox();
+                     mesh.position.y = (mesh.geometry.boundingBox.max.y - mesh.geometry.boundingBox.min.y) / 2;
+                }
+            }
+            return mesh;
         }
         // --- Event Handlers ---
+        function onMouseMove(event) { /* ... (Keep as before) ... */
+             mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         }
         function onDocumentClick(event) {
+            if (selectedObjectType === "None" || !selectedObjectType) return;
             const groundCandidates = Object.values(groundMeshes);
             if (groundCandidates.length === 0) return;
             if (intersects.length > 0) {
                 const intersectPoint = intersects[0].point;
+                // Prepare object data for the server
                 const newObjData = {
+                    obj_id: THREE.MathUtils.generateUUID(), // Generate unique ID client-side
                     type: selectedObjectType,
+                    position: { x: intersectPoint.x, y: 0, z: intersectPoint.z }, // Base position on ground
+                    rotation: { _x: 0, _y: Math.random() * Math.PI * 2, _z: 0, _order: 'XYZ' } // Random Y rotation
                 };
+                // Adjust Y position based on object type AFTER getting the type
+                // This should ideally use the geometry's bounding box, but hardcoding for now
+                const tempMesh = createPrimitiveMesh(selectedObjectType); // Create temporarily to get height? Costly.
+                if (tempMesh && tempMesh.geometry) {
+                    tempMesh.geometry.computeBoundingBox();
+                    const height = tempMesh.geometry.boundingBox.max.y - tempMesh.geometry.boundingBox.min.y;
+                    // Assume origin is at the center Y for most default geometries
+                    newObjData.position.y = (height / 2) + intersectPoint.y + 0.01; // Place base slightly above ground
+                } else {
+                     // Fallback if mesh creation failed or no geometry
+                     newObjData.position.y = 0.5 + intersectPoint.y; // Default lift
+                }
+                console.log(`Placing ${selectedObjectType} (${newObjData.obj_id}) at`, newObjData.position);
+                // 1. Add object visually immediately (Optimistic Update)
+                createAndPlaceObject(newObjData, true); // Mark as locally placed initially? Not needed now.
+                // 2. Send placement message to server via WebSocket
+                sendWebSocketMessage("place_object", {
+                     username: myUsername,
+                     object_data: newObjData
+                 });
+                // 3. No need for local saving (sessionStorage) anymore
+            }
         }
+        function onKeyDown(event) { /* ... (Keep as before) ... */ keysPressed[event.code] = true; }
+        function onKeyUp(event) { /* ... (Keep as before) ... */ keysPressed[event.code] = false; }
+        function onWindowResize() { /* ... (Keep as before) ... */ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }
+        // --- Functions called by Python ---
+        function teleportPlayer(targetX, targetZ) { /* ... (Keep as before) ... */
+             console.log(`JS teleportPlayer called: x=${targetX}, z=${targetZ}`); 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."); }
         }
+        function updateSelectedObjectType(newType) { // Renamed from previous attempt
              console.log("JS updateSelectedObjectType received:", newType);
              selectedObjectType = newType;
+             // Optionally provide visual feedback (e.g., change cursor)
         }
+        // --- Animation Loop & Helpers ---
+        function updatePlayerMovement() { /* ... (Keep as before, includes checkAndExpandGroundVisuals) ... */
+             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) { 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); checkAndExpandGroundVisuals(); }
         }
+        function checkAndExpandGroundVisuals() { /* ... (Keep as before) ... */
+             if (!playerMesh) return; const currentGridX = Math.floor(playerMesh.position.x / plotWidth); const currentGridZ = Math.floor(playerMesh.position.z / plotDepth); const viewDistanceGrids = 3; // Expand further?
+             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]) { createGroundPlane(checkX, checkZ, true); } } }
+        }
+        function updateCamera() { /* ... (Keep as before) ... */
+             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);
         }
         function animate() {