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