3DWorldBuilder

Running

App Files Files Community

awacke1 commited on 15 days ago

Commit

c50b518

verified ·

1 Parent(s): 42583aa

Update index.html

Browse files

Files changed (1) hide show

index.html +118 -435

index.html CHANGED Viewed

@@ -1,441 +1,124 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Three.js Infinite World</title>
-    <style>
-        body { margin: 0; overflow: hidden; }
-        canvas { display: block; }
-    </style>
-    <!-- New: Polling function for game state -->
-    <script>
-        // Poll the shared game state every 5 seconds (for demonstration)
-        function pollGameState() {
-            console.log("Polling updated game state:", window.GAME_STATE);
-            // Here you could update the scene based on the new state.
-        }
-        setInterval(pollGameState, 5000);
-    </script>
 </head>
 <body>
-    <script type="importmap">
-        {
-            "imports": {
-                "three": "https://unpkg.com/[email protected]/build/three.module.js",
-                "three/addons/": "https://unpkg.com/three@0.163.0/examples/jsm/"
-            }
-        }
-    </script>
-    <script type="module">
-        import * as THREE from 'three';
-        let scene, camera, renderer, playerMesh;
-        let raycaster, mouse;
-        const keysPressed = {};
-        const playerSpeed = 0.15;
-        let newlyPlacedObjects = []; // Track objects added THIS session for saving
-        const placeholderPlots = new Set();
-        const groundMeshes = {}; // Store ground mesh references
-        // --- Session Storage Key ---
-        const SESSION_STORAGE_KEY = 'unsavedInfiniteWorldState';
-        // --- Injected 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 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
-        });
-        function init() {
-            scene = new THREE.Scene();
-            scene.background = new THREE.Color(0xabcdef);
-            const aspect = window.innerWidth / window.innerHeight;
-            camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 4000);
-            camera.position.set(0, 15, 20);
-            camera.lookAt(0, 0, 0);
-            scene.add(camera);
-            setupLighting();
-            setupInitialGround();
-            setupPlayer();
-            raycaster = new THREE.Raycaster();
-            mouse = new THREE.Vector2();
-            renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.shadowMap.enabled = true;
-            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-            document.body.appendChild(renderer.domElement);
-            loadInitialObjects();
-            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 functions callable by Streamlit
-            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}`;
-            if (groundMeshes[gridKey]) return;
-            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;
-            groundMesh.position.x = gridX * plotWidth + plotWidth / 2.0;
-            groundMesh.position.z = gridZ * plotDepth + plotDepth / 2.0;
-            groundMesh.receiveShadow = true;
-            groundMesh.userData.gridKey = gridKey;
-            scene.add(groundMesh);
-            groundMeshes[gridKey] = groundMesh;
-            if (isPlaceholder) placeholderPlots.add(gridKey);
-        }
-        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, 0.4 + 0.8/2, plotDepth/2);
-            playerMesh.castShadow = true;
-            playerMesh.receiveShadow = true;
-            scene.add(playerMesh);
-        }
-        function loadInitialObjects() {
-            console.log(`Loading ${allInitialObjects.length} initial objects from Python.`);
-            allInitialObjects.forEach(objData => { createAndPlaceObject(objData, false); });
-            console.log("Finished loading initial objects.");
-        }
-        function createAndPlaceObject(objData, isNewObject) {
-            let loadedObject = null;
-            switch (objData.type) {
-                case "Simple House": loadedObject = createSimpleHouse(); break;
-                case "Tree": loadedObject = createTree(); break;
-                case "Rock": loadedObject = createRock(); break;
-                case "Fence Post": loadedObject = createFencePost(); break;
-                default: console.warn("Unknown object type in data:", objData.type); break;
-            }
-            if (loadedObject) {
-                if (objData.position && objData.position.x !== undefined) {
-                    loadedObject.position.set(objData.position.x, objData.position.y, objData.position.z);
-                } else if (objData.pos_x !== undefined) {
-                    loadedObject.position.set(objData.pos_x, objData.pos_y, objData.pos_z);
-                }
-                if (objData.rotation) {
-                    loadedObject.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
-                } else if (objData.rot_x !== undefined) {
-                    loadedObject.rotation.set(objData.rot_x, objData.rot_y, objData.rot_z, objData.rot_order || 'XYZ');
-                }
-                loadedObject.userData.obj_id = objData.obj_id || loadedObject.userData.obj_id;
-                scene.add(loadedObject);
-                if (isNewObject) newlyPlacedObjects.push(loadedObject);
-                return loadedObject;
-            }
-            return null;
-        }
-        function saveUnsavedState() {
-            try {
-                const stateToSave = newlyPlacedObjects.map(obj => ({
-                    obj_id: obj.userData.obj_id,
-                    type: obj.userData.type,
-                    position: { x: obj.position.x, y: obj.position.y, z: obj.position.z },
-                    rotation: { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order }
-                }));
-                sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave));
-                console.log(`Saved ${stateToSave.length} unsaved objects to sessionStorage.`);
-            } catch (e) {
-                console.error("Error saving state to sessionStorage:", e);
-            }
-        }
-        function restoreUnsavedState() {
-            try {
-                const savedState = sessionStorage.getItem(SESSION_STORAGE_KEY);
-                if (savedState) {
-                    console.log("Found unsaved state in sessionStorage. Restoring...");
-                    const objectsToRestore = JSON.parse(savedState);
-                    if (Array.isArray(objectsToRestore)) {
-                        newlyPlacedObjects = [];
-                        let count = 0;
-                        objectsToRestore.forEach(objData => {
-                            if(createAndPlaceObject(objData, true)) { count++; }
-                        });
-                        console.log(`Restored ${count} objects.`);
-                    }
-                } else {
-                    console.log("No unsaved state found in sessionStorage.");
-                }
-            } catch (e) {
-                console.error("Error restoring state from sessionStorage:", e);
-                sessionStorage.removeItem(SESSION_STORAGE_KEY);
-            }
-        }
-        function clearUnsavedState() {
-            sessionStorage.removeItem(SESSION_STORAGE_KEY);
-            newlyPlacedObjects = [];
-            console.log("Cleared unsaved state from memory and sessionStorage.");
-        }
-        function createObjectBase(type) {
-            return { userData: { type: type, obj_id: THREE.MathUtils.generateUUID() } };
-        }
-        function createSimpleHouse() {
-            const base = createObjectBase("Simple House");
-            const group = new THREE.Group();
-            Object.assign(group, base);
-            const mat1 = new THREE.MeshStandardMaterial({color:0xffccaa, roughness:0.8});
-            const mat2 = new THREE.MeshStandardMaterial({color:0xaa5533, roughness:0.7});
-            const m1 = new THREE.Mesh(new THREE.BoxGeometry(2,1.5,2.5), mat1);
-            m1.position.y = 1.5/2;
-            m1.castShadow = true;
-            m1.receiveShadow = true;
-            group.add(m1);
-            const m2 = new THREE.Mesh(new THREE.ConeGeometry(1.8,1,4), mat2);
-            m2.position.y = 1.5+1/2;
-            m2.rotation.y = Math.PI/4;
-            m2.castShadow = true;
-            m2.receiveShadow = true;
-            group.add(m2);
-            return group;
-        }
-        function createTree() {
-            const base = createObjectBase("Tree");
-            const group = new THREE.Group();
-            Object.assign(group, base);
-            const mat1 = new THREE.MeshStandardMaterial({color:0x8B4513, roughness:0.9});
-            const mat2 = new THREE.MeshStandardMaterial({color:0x228B22, roughness:0.8});
-            const m1 = new THREE.Mesh(new THREE.CylinderGeometry(0.3,0.4,2,8), mat1);
-            m1.position.y = 1;
-            m1.castShadow = true;
-            m1.receiveShadow = true;
-            group.add(m1);
-            const m2 = new THREE.Mesh(new THREE.IcosahedronGeometry(1.2,0), mat2);
-            m2.position.y = 2.8;
-            m2.castShadow = true;
-            m2.receiveShadow = true;
-            group.add(m2);
-            return group;
-        }
-        function createRock() {
-            const base = createObjectBase("Rock");
-            const mat = new THREE.MeshStandardMaterial({color:0xaaaaaa, roughness:0.8, metalness:0.1});
-            const rock = new THREE.Mesh(new THREE.IcosahedronGeometry(0.7,0), mat);
-            Object.assign(rock, base);
-            rock.position.y = 0.35;
-            rock.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, 0);
-            rock.castShadow = true;
-            rock.receiveShadow = true;
-            return rock;
-        }
-        function createFencePost() {
-            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;
-        }
-        function onMouseMove(event) {
-            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-        }
-        function onDocumentClick(event) {
-            if (selectedObjectType === "None") return;
-            const groundCandidates = Object.values(groundMeshes);
-            if (groundCandidates.length === 0) return;
-            raycaster.setFromCamera(mouse, camera);
-            const intersects = raycaster.intersectObjects(groundCandidates);
-            if (intersects.length > 0) {
-                const intersectPoint = intersects[0].point;
-                let newObjectToPlace = null;
-                switch (selectedObjectType) {
-                    case "Simple House": newObjectToPlace = createSimpleHouse(); break;
-                    case "Tree": newObjectToPlace = createTree(); break;
-                    case "Rock": newObjectToPlace = createRock(); break;
-                    case "Fence Post": newObjectToPlace = createFencePost(); break;
-                    default: return;
-                }
-                if (newObjectToPlace) {
-                    newObjectToPlace.position.copy(intersectPoint);
-                    newObjectToPlace.position.y += 0.01;
-                    scene.add(newObjectToPlace);
-                    newlyPlacedObjects.push(newObjectToPlace);
-                    saveUnsavedState();
-                    console.log(`Placed new ${selectedObjectType}. Total unsaved: ${newlyPlacedObjects.length}`);
-                }
-            }
-        }
-        function onKeyDown(event) { keysPressed[event.code] = true; }
-        function onKeyUp(event) { keysPressed[event.code] = false; }
-        function teleportPlayer(targetX, targetZ) {
-            console.log(`JS teleportPlayer called with targetX: ${targetX}, targetZ: ${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 getSaveDataAndPosition() {
-            console.log(`JS getSaveDataAndPosition called. Found ${newlyPlacedObjects.length} new objects.`);
-            const objectsToSave = newlyPlacedObjects.map(obj => {
-                if (!obj.userData || !obj.userData.type) { return null; }
-                const rotation = { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order };
-                return {
-                    obj_id: obj.userData.obj_id, type: obj.userData.type,
-                    position: { x: obj.position.x, y: obj.position.y, z: obj.position.z },
-                    rotation: rotation
-                };
-            }).filter(obj => obj !== null);
-            const playerPos = playerMesh ? { x: playerMesh.position.x, y: playerMesh.position.y, z: playerMesh.position.z } : {x:0, y:0, z:0};
-            const payload = {
-                playerPosition: playerPos,
-                objectsToSave: objectsToSave
-            };
-            console.log("Prepared payload for saving:", payload);
-            return JSON.stringify(payload);
-        }
-        function resetNewlyPlacedObjects() {
-            console.log(`JS resetNewlyPlacedObjects called.`);
-            clearUnsavedState();
-        }
-        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) {
-                moveDirection.normalize().multiplyScalar(playerSpeed);
-                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.4 + 0.8/2);
-                checkAndExpandGround();
-            }
-        }
-        function checkAndExpandGround() {
-            if (!playerMesh) return;
-            const currentGridX = Math.floor(playerMesh.position.x / plotWidth);
-            const currentGridZ = Math.floor(playerMesh.position.z / plotDepth);
-            for (let dx = -1; dx <= 1; dx++) {
-                for (let dz = -1; dz <= 1; dz++) {
-                    if (dx === 0 && dz === 0) continue;
-                    const checkX = currentGridX + dx;
-                    const checkZ = currentGridZ + dz;
-                    const gridKey = `${checkX}_${checkZ}`;
-                    if (!groundMeshes[gridKey]) {
-                        const isSavedPlot = plotsMetadata.some(plot => plot.grid_x === checkX && plot.grid_z === checkZ);
-                        if (!isSavedPlot) {
-                            createGroundPlane(checkX, checkZ, true);
-                        }
-                    }
-                }
-            }
-        }
-        function updateCamera() {
-            if (!playerMesh) return;
-            const offset = new THREE.Vector3(0, 15, 20);
-            const targetPosition = playerMesh.position.clone().add(offset);
-            camera.position.lerp(targetPosition, 0.08);
-            camera.lookAt(playerMesh.position);
-        }
-        function onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }
-        function animate() {
-            requestAnimationFrame(animate);
-            updatePlayerMovement();
-            updateCamera();
-            renderer.render(scene, camera);
-        }
-        init();
-    </script>
 </body>
-</html>

+<!-- index.html -->
 <!DOCTYPE html>
 <html>
 <head>
+  <meta charset="utf-8">
+  <title>Three.js Infinite World</title>
+  <style>body{margin:0;overflow:hidden;}canvas{display:block;}</style>
+  <!-- State injected here -->
 </head>
 <body>
+  <script type="importmap">
+  {"imports":{"three":"https://unpkg.com/[email protected]/build/three.module.js","three/addons/":"https://unpkg.com/[email protected]/examples/jsm/"}}
+  </script>
+  <script type="module">
+    import * as THREE from 'three';
+    let scene, camera, renderer, playerMesh, raycaster, mouse;
+    let newlyPlacedObjects = [];
+    const groundMeshes = {}, placeholderPlots=new Set();
+    const SESSION_KEY='unsavedInfiniteWorldState';
+    function init(){
+      scene=new THREE.Scene(); scene.background=new THREE.Color(0xabcdef);
+      camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,4000);
+      camera.position.set(0,15,20);camera.lookAt(0,0,0);
+      setupLighting(); setupGround(); setupPlayer();
+      raycaster=new THREE.Raycaster(); mouse=new THREE.Vector2();
+      renderer=new THREE.WebGLRenderer({antialias:true});
+      renderer.setSize(window.innerWidth,window.innerHeight);
+      renderer.shadowMap.enabled=true; document.body.appendChild(renderer.domElement);
+      loadObjects(); restoreUnsavedState();
+      window.addEventListener('mousemove',onMouseMove,false);
+      window.addEventListener('click',onDocClick,false);
+      window.addEventListener('keydown',onKeyDown);
+      window.addEventListener('keyup',onKeyUp);
+      window.teleportPlayer=teleportPlayer;
+      window.getSaveDataAndPosition=getSaveDataAndPosition;
+      window.resetNewlyPlacedObjects=resetNewlyPlacedObjects;
+      setInterval(pollGameState,5000);
+      animate();
+    }
+    function setupLighting(){
+      scene.add(new THREE.AmbientLight(0xffffff,0.5));
+      const dir=new THREE.DirectionalLight(0xffffff,1);dir.position.set(50,150,100);
+      dir.castShadow=true;scene.add(dir);
+    }
+    function setupGround(){
+      const plots=window.PLOTS_METADATA||[];
+      (plots.length?plots:[{grid_x:0,grid_z:0}]).forEach(p=>createGround(p.grid_x,p.grid_z,false));
+    }
+    function createGround(x,z,ph=false){
+      const key=`${x}_${z}`; if(groundMeshes[key])return;
+      const geo=new THREE.PlaneGeometry(window.PLOT_WIDTH,window.PLOT_DEPTH);
+      const mat=new THREE.MeshStandardMaterial({color:ph?0x448844:0x55aa55,side:THREE.DoubleSide});
+      const m=new THREE.Mesh(geo,mat); m.rotation.x=-Math.PI/2;
+      m.position.set(x*window.PLOT_WIDTH+window.PLOT_WIDTH/2,-0.05,z*window.PLOT_DEPTH+window.PLOT_DEPTH/2);
+      scene.add(m); groundMeshes[key]=m; if(ph)placeholderPlots.add(key);
+    }
+    function setupPlayer(){
+      const geo=new THREE.CapsuleGeometry(0.4,0.8,4,8);
+      playerMesh=new THREE.Mesh(geo,new THREE.MeshStandardMaterial({color:0x0000ff,roughness:0.6}));
+      playerMesh.position.set(window.PLOT_WIDTH/2,1.2,window.PLOT_DEPTH/2);
+      scene.add(playerMesh);
+    }
+    function loadObjects(){
+      (window.ALL_INITIAL_OBJECTS||[]).forEach(d=>createAndPlace(d,false));
+    }
+    function createAndPlace(d,newObj){
+      const obj=window.KITS[d.type]?createPrefabKit(d.type):null;
+      if(!obj) return;
+      obj.position.set(d.pos_x||d.position.x,d.pos_y||d.position.y,d.pos_z||d.position.z);
+      scene.add(obj); if(newObj)newlyPlacedObjects.push(obj);
+    }
+    function createPrefabKit(name){
+      const kit=window.KITS[name]||{}; const grp=new THREE.Group();
+      kit.modules?.forEach(m=>{const md=createModule(m); if(md)grp.add(md)});
+      return grp;
+    }
+    function createModule(n){
+      switch(n){
+        case 'Cube': return new THREE.Mesh(new THREE.BoxGeometry(1,1,1),new THREE.MeshStandardMaterial());
+        case 'Sphere': return new THREE.Mesh(new THREE.SphereGeometry(0.5,16,16),new THREE.MeshStandardMaterial());
+        case 'Cylinder': return new THREE.Mesh(new THREE.CylinderGeometry(0.5,0.5,1,12),new THREE.MeshStandardMaterial());
+        case 'Cone': return new THREE.Mesh(new THREE.ConeGeometry(0.5,1,12),new THREE.MeshStandardMaterial());
+        default: console.warn('Unknown module',n); return null;
+      }
+    }
+    function onDocClick(ev){
+      if(window.SELECTED_OBJECT_TYPE==='None')return; const candidates=Object.values(groundMeshes);
+      raycaster.setFromCamera(mouse,camera); const hit=raycaster.intersectObjects(candidates);
+      if(!hit.length)return; const pt=hit[0].point;
+      const mesh=createPrefabKit(window.SELECTED_OBJECT_TYPE);
+      if(mesh){mesh.position.copy(pt);scene.add(mesh);newlyPlacedObjects.push(mesh);saveUnsaved();}
+    }
+    function saveUnsaved(){sessionStorage.setItem(SESSION_KEY,JSON.stringify(newlyPlacedObjects.map(o=>({obj_id:o.userData?.obj_id,type:o.userData?.type,position:{x:o.position.x,y:o.position.y,z:o.position.z},rotation:{_x:o.rotation.x,_y:o.rotation.y,_z:o.rotation.z,_order:o.rotation.order}}))));}
+    function restoreUnsavedState(){const s=sessionStorage.getItem(SESSION_KEY); if(s){JSON.parse(s).forEach(d=>createAndPlace(d,true));}}
+    function resetNewlyPlacedObjects(){sessionStorage.removeItem(SESSION_KEY);newlyPlacedObjects=[];}
+    function getSaveDataAndPosition(){const objs=newlyPlacedObjects.map(o=>({obj_id:o.userData?.obj_id,type:o.userData?.type,position:{x:o.position.x,y:o.position.y,z:o.position.z},rotation:{_x:o.rotation.x,_y:o.rotation.y,_z:o.rotation.z,_order:o.rotation.order}}));
+      const pos={x:playerMesh.position.x,y:playerMesh.position.y,z:playerMesh.position.z};return JSON.stringify({playerPosition:pos,objectsToSave:objs});
+    }
+    function teleportPlayer(x,z){playerMesh.position.set(x,playerMesh.position.y,z);camera.position.set(x,playerMesh.position.y+15,z+20);camera.lookAt(playerMesh.position);}
+    function pollGameState(){console.log('Polling',window.GAME_STATE);}
+    function onMouseMove(e){mouse.x=(e.clientX/window.innerWidth)*2-1;mouse.y=-(e.clientY/window.innerHeight)*2+1;}
+    function onKeyDown(e){/* movement logic */}
+    function onKeyUp(e){}
+    function animate(){requestAnimationFrame(animate);renderer.render(scene,camera);}
+    init();
+  </script>
 </body>
+</html>