Spaces:

awacke1
/

Happy-Valley-Game

Sleeping

App Files Files Community

awacke1 commited on Apr 5

Commit

006833b

verified ·

1 Parent(s): d046ba4

Update index.html

Browse files

Files changed (1) hide show

index.html +243 -168

index.html CHANGED Viewed

@@ -1,13 +1,32 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Three.js Pick and Place</title>
     <style>
-        body { margin: 0; overflow: hidden; } /* Hide scrollbars */
         canvas { display: block; }
     </style>
     </head>
 <body>
     <script type="importmap">
         {
             "imports": {
@@ -20,242 +39,298 @@
     <script type="module">
         import * as THREE from 'three';
-        let scene, camera, renderer, groundMesh;
         let raycaster, mouse;
-        const placedObjects = []; // Keep track of placed objects
-        // --- Access State from Streamlit (set in global scope via injection) ---
-        // Default value if injection fails for some reason
         const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
         function init() {
-            // --- Basic Setup ---
             scene = new THREE.Scene();
-            scene.background = new THREE.Color(0xabcdef); // Light blue sky
-            // --- Camera (Orthographic adjusted for better view) ---
             const aspect = window.innerWidth / window.innerHeight;
-            const viewSize = 30; // Increase view size
-            camera = new THREE.OrthographicCamera(
-                -viewSize * aspect / 2, viewSize * aspect / 2,
-                viewSize / 2, -viewSize / 2,
-                0.1, 100 // Adjust near/far planes
-            );
-            // Position camera higher and angled slightly for better 3D view
-            camera.position.set(10, 20, 10);
-            camera.lookAt(scene.position); // Look at the center
-            camera.zoom = 1.2; // Zoom in a bit
-            camera.updateProjectionMatrix();
             scene.add(camera);
-             // --- Lighting (Improved) ---
-            // Ambient light for overall illumination
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft white light
-            scene.add(ambientLight);
-            // Directional light for sunlight and shadows
             const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
-            directionalLight.position.set(15, 30, 20); // Adjust position for angle
             directionalLight.castShadow = true;
-            // Configure shadow properties (important!)
-            directionalLight.shadow.mapSize.width = 2048; // Higher res shadows
             directionalLight.shadow.mapSize.height = 2048;
             directionalLight.shadow.camera.near = 0.5;
             directionalLight.shadow.camera.far = 100;
-            // Adjust shadow camera frustum to cover the playable area
             directionalLight.shadow.camera.left = -30;
             directionalLight.shadow.camera.right = 30;
             directionalLight.shadow.camera.top = 30;
             directionalLight.shadow.camera.bottom = -30;
-            directionalLight.shadow.bias = -0.001; // Helps prevent shadow acne
             scene.add(directionalLight);
-            // Optional: Visualize the shadow camera
-            // const shadowHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
-            // scene.add(shadowHelper);
-            // --- Ground ---
-            const groundGeometry = new THREE.PlaneGeometry(50, 50); // Larger ground
-            // Use MeshStandardMaterial for lighting/shadows
-            const groundMaterial = new THREE.MeshStandardMaterial({
-                color: 0x55aa55, // Grassy green
-                roughness: 0.9,
-                metalness: 0.1
-             });
             groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
-            groundMesh.rotation.x = -Math.PI / 2; // Rotate flat
-            groundMesh.position.y = -0.05; // Position slightly below origin
-            groundMesh.receiveShadow = true; // Allow ground to receive shadows
             scene.add(groundMesh);
-            // --- Raycaster and Mouse Vector ---
-            raycaster = new THREE.Raycaster();
-            mouse = new THREE.Vector2();
-            // --- Renderer (Shadows Enabled) ---
-            renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.shadowMap.enabled = true; // Enable shadow map rendering
-            renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
-            document.body.appendChild(renderer.domElement);
-            // --- Event Listeners ---
-            document.addEventListener('mousemove', onMouseMove, false);
-            document.addEventListener('click', onDocumentClick, false);
-            window.addEventListener('resize', onWindowResize, false);
-            // --- Start Animation ---
-            animate();
         }
-        // --- Object Creation Functions (Using Primitives) ---
-        function createSimpleHouse() {
             const group = new THREE.Group();
             const mainMaterial = new THREE.MeshStandardMaterial({ color: 0xffccaa, roughness: 0.8 });
             const roofMaterial = new THREE.MeshStandardMaterial({ color: 0xaa5533, roughness: 0.7 });
-            // Base (BoxGeometry)
             const base = new THREE.Mesh(new THREE.BoxGeometry(2, 1.5, 2.5), mainMaterial);
-            base.position.y = 1.5 / 2; // Sit on ground
-            base.castShadow = true;
-            base.receiveShadow = true;
-            group.add(base);
-            // Roof (ConeGeometry or angled planes) - using Cone here
-            const roof = new THREE.Mesh(new THREE.ConeGeometry(1.8, 1, 4), roofMaterial); // Radius, Height, Segments (4 for pyramid)
-            roof.position.y = 1.5 + 1 / 2; // Place on top of base
-            roof.rotation.y = Math.PI / 4; // Align edges
-            roof.castShadow = true;
-            roof.receiveShadow = true;
-            group.add(roof);
             return group;
-        }
-        function createTree() {
             const group = new THREE.Group();
-            const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.9 }); // Brown
-            const leavesMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22, roughness: 0.8 }); // Forest Green
-            // Trunk (CylinderGeometry)
-            const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.4, 2, 8), trunkMaterial); // RadiusTop, RadiusBottom, Height, Segments
-            trunk.position.y = 2 / 2;
-            trunk.castShadow = true;
-            trunk.receiveShadow = true;
-            group.add(trunk);
-            // Leaves (SphereGeometry or Icosahedron)
-            const leaves = new THREE.Mesh(new THREE.IcosahedronGeometry(1.2, 0), leavesMaterial); // Radius, Detail (0=less poly)
-            leaves.position.y = 2 + 0.8; // Place above trunk
-            leaves.castShadow = true;
-            leaves.receiveShadow = true;
-            group.add(leaves);
             return group;
-        }
-        function createRock() {
-            // Use Icosahedron for irregular shape, or Sphere with displacement later
             const rockMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.8, metalness: 0.1 });
-            const rock = new THREE.Mesh(new THREE.IcosahedronGeometry(0.7, 0), rockMaterial); // Radius, Detail
-            rock.position.y = 0.7 / 2; // Sit on ground (approx)
-            rock.rotation.x = Math.random() * Math.PI;
-            rock.rotation.y = Math.random() * Math.PI;
-            rock.castShadow = true;
-            rock.receiveShadow = true;
-            return rock; // Simple mesh, no group needed
-        }
-        function createFencePost() {
-            const postMaterial = new THREE.MeshStandardMaterial({ color: 0xdeb887, roughness: 0.9 }); // BurlyWood
-             // Use BoxGeometry for a simple square post
             const post = new THREE.Mesh(new THREE.BoxGeometry(0.2, 1.5, 0.2), postMaterial);
-            post.position.y = 1.5 / 2;
-            post.castShadow = true;
-            post.receiveShadow = true;
             return post;
-        }
         // --- Event Handlers ---
         function onMouseMove(event) {
-            // Calculate mouse position in normalized device coordinates (-1 to +1)
             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
             mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         }
         function onDocumentClick(event) {
-             console.log("Click! Selected type:", selectedObjectType); // Debug
-             if (selectedObjectType === "None") {
-                 console.log("No object type selected for placement.");
-                 return; // Don't place anything if "None" is selected
-             }
-            // Update the picking ray with the camera and mouse position
-            raycaster.setFromCamera(mouse, camera);
-            // Calculate objects intersecting the picking ray - only check the ground
             const intersects = raycaster.intersectObject(groundMesh);
             if (intersects.length > 0) {
                 const intersectPoint = intersects[0].point;
-                console.log("Intersection at:", intersectPoint); // Debug
                 let newObject = null;
-                // Call the correct creation function based on the selected type
-                switch (selectedObjectType) {
-                    case "Simple House":
-                        newObject = createSimpleHouse();
-                        break;
-                    case "Tree":
-                        newObject = createTree();
-                        break;
-                    case "Rock":
-                        newObject = createRock();
-                        break;
-                    case "Fence Post":
-                        newObject = createFencePost();
-                        break;
-                    default:
-                        console.warn("Unknown object type:", selectedObjectType);
-                        return; // Don't place unknown types
                 }
                 if (newObject) {
-                    // Position the new object at the click point on the ground
-                    // The Y position is handled within the create functions to sit on origin
-                    newObject.position.x = intersectPoint.x;
-                    newObject.position.z = intersectPoint.z;
-                    // Y position might need slight adjustment depending on object origin
-                    // For objects created with base at y=0, intersectPoint.y is close enough
                     scene.add(newObject);
-                    placedObjects.push(newObject); // Track the object
-                    console.log(`Placed ${selectedObjectType} at`, newObject.position);
                 }
-            } else {
-                 console.log("Click did not intersect ground.");
             }
         }
          function onWindowResize() {
-            const aspect = window.innerWidth / window.innerHeight;
-            const viewSize = 30;
-            camera.left = -viewSize * aspect / 2;
-            camera.right = viewSize * aspect / 2;
-            camera.top = viewSize / 2;
-            camera.bottom = -viewSize / 2;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         }
         function animate() {
             requestAnimationFrame(animate);
-            // Add any animations here later if needed
             renderer.render(scene, camera);
         }

 <!DOCTYPE html>
 <html>
 <head>
+    <title>Three.js World Builder</title>
     <style>
+        body { margin: 0; overflow: hidden; }
         canvas { display: block; }
+        /* Style for the save button */
+        #saveButton {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            padding: 10px 15px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            z-index: 10; /* Ensure it's above the canvas */
+        }
+        #saveButton:hover {
+            background-color: #45a049;
+        }
     </style>
     </head>
 <body>
+    <button id="saveButton">💾 Save Work</button>
     <script type="importmap">
         {
             "imports": {
     <script type="module">
         import * as THREE from 'three';
+        let scene, camera, renderer, groundMesh, playerMesh;
         let raycaster, mouse;
+        const placedObjects = [];
+        const keysPressed = {}; // Track key presses for smooth movement
+        const playerSpeed = 0.15;
+        // --- Access State from Streamlit (set via injected script) ---
         const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
+        const initialObjects = window.INITIAL_OBJECTS || [];
+        const currentSpaceId = window.CURRENT_SPACE_ID || null;
+        const currentSpaceName = window.CURRENT_SPACE_NAME || ""; // Get name for save redirect
         function init() {
             scene = new THREE.Scene();
+            scene.background = new THREE.Color(0xabcdef);
             const aspect = window.innerWidth / window.innerHeight;
+            const viewSize = 30;
+            // Using PerspectiveCamera now for better depth perception with movement
+            camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 1000);
+            camera.position.set(0, 15, 20); // Position behind and above origin
+            camera.lookAt(0, 0, 0);
             scene.add(camera);
+            setupLighting();
+            setupGround();
+            setupPlayer(); // Create player representation
+            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);
+            // --- Load Initial Objects ---
+            loadInitialObjects();
+            // --- 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);
+            document.getElementById('saveButton').addEventListener('click', onSaveClick);
+            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(15, 30, 20);
             directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 2048;
             directionalLight.shadow.mapSize.height = 2048;
             directionalLight.shadow.camera.near = 0.5;
             directionalLight.shadow.camera.far = 100;
             directionalLight.shadow.camera.left = -30;
             directionalLight.shadow.camera.right = 30;
             directionalLight.shadow.camera.top = 30;
             directionalLight.shadow.camera.bottom = -30;
+            directionalLight.shadow.bias = -0.001;
             scene.add(directionalLight);
+        }
+        function setupGround() {
+            const groundGeometry = new THREE.PlaneGeometry(50, 50); // Size matches constant in Python
+            const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x55aa55, roughness: 0.9, metalness: 0.1 });
             groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
+            groundMesh.rotation.x = -Math.PI / 2;
+            groundMesh.position.y = -0.05;
+            groundMesh.receiveShadow = true;
             scene.add(groundMesh);
+        }
+        function setupPlayer() {
+            // Simple Capsule or Box primitive for player
+            const playerGeo = new THREE.CapsuleGeometry(0.4, 0.8, 4, 8); // Radius, Height
+            const playerMat = new THREE.MeshStandardMaterial({ color: 0x0000ff, roughness: 0.6 });
+            playerMesh = new THREE.Mesh(playerGeo, playerMat);
+            playerMesh.position.set(0, 0.4 + 0.8/2, 5); // Start position (Y adjusted for capsule base)
+            playerMesh.castShadow = true;
+            playerMesh.receiveShadow = true;
+            scene.add(playerMesh);
+        }
+         function loadInitialObjects() {
+            console.log("Loading initial objects:", initialObjects);
+            initialObjects.forEach(objData => {
+                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;
+                    // Add cases for any other types you save
+                }
+                if (loadedObject && objData.position) {
+                    // Apply saved position and rotation
+                    loadedObject.position.set(objData.position.x, objData.position.y, objData.position.z);
+                    if (objData.rotation) {
+                        loadedObject.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order);
+                    } else if (objData.quaternion) { // Handle if saved as quaternion
+                         loadedObject.quaternion.set(objData.quaternion._x, objData.quaternion._y, objData.quaternion._z, objData.quaternion._w);
+                    }
+                    scene.add(loadedObject);
+                    placedObjects.push(loadedObject); // Track loaded objects
+                }
+            });
         }
+        // --- Object Creation Functions (Keep these from previous step) ---
+         function createSimpleHouse() { /* ... copy from previous ... */
             const group = new THREE.Group();
             const mainMaterial = new THREE.MeshStandardMaterial({ color: 0xffccaa, roughness: 0.8 });
             const roofMaterial = new THREE.MeshStandardMaterial({ color: 0xaa5533, roughness: 0.7 });
             const base = new THREE.Mesh(new THREE.BoxGeometry(2, 1.5, 2.5), mainMaterial);
+            base.position.y = 1.5 / 2; base.castShadow = true; base.receiveShadow = true; group.add(base);
+            const roof = new THREE.Mesh(new THREE.ConeGeometry(1.8, 1, 4), roofMaterial);
+            roof.position.y = 1.5 + 1 / 2; roof.rotation.y = Math.PI / 4; roof.castShadow = true; roof.receiveShadow = true; group.add(roof);
+            group.userData.type = "Simple House"; // Store type for saving
             return group;
+         }
+         function createTree() { /* ... copy from previous ... */
             const group = new THREE.Group();
+            const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.9 });
+            const leavesMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22, roughness: 0.8 });
+            const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.4, 2, 8), trunkMaterial);
+            trunk.position.y = 2 / 2; trunk.castShadow = true; trunk.receiveShadow = true; group.add(trunk);
+            const leaves = new THREE.Mesh(new THREE.IcosahedronGeometry(1.2, 0), leavesMaterial);
+            leaves.position.y = 2 + 0.8; leaves.castShadow = true; leaves.receiveShadow = true; group.add(leaves);
+            group.userData.type = "Tree";
             return group;
+         }
+         function createRock() { /* ... copy from previous ... */
             const rockMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.8, metalness: 0.1 });
+            const rock = new THREE.Mesh(new THREE.IcosahedronGeometry(0.7, 0), rockMaterial);
+            rock.position.y = 0.7 / 2; rock.rotation.x = Math.random() * Math.PI; rock.rotation.y = Math.random() * Math.PI;
+            rock.castShadow = true; rock.receiveShadow = true;
+            rock.userData.type = "Rock";
+            return rock;
+         }
+         function createFencePost() { /* ... copy from previous ... */
+            const postMaterial = new THREE.MeshStandardMaterial({ color: 0xdeb887, roughness: 0.9 });
             const post = new THREE.Mesh(new THREE.BoxGeometry(0.2, 1.5, 0.2), postMaterial);
+            post.position.y = 1.5 / 2; post.castShadow = true; post.receiveShadow = true;
+            post.userData.type = "Fence Post";
             return post;
+         }
         // --- 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; // Don't place
+             // Prevent placing if clicking the save button
+             if (event.target.id === 'saveButton') return;
+            raycaster.setFromCamera(mouse, camera);
             const intersects = raycaster.intersectObject(groundMesh);
             if (intersects.length > 0) {
                 const intersectPoint = intersects[0].point;
                 let newObject = null;
+                switch (selectedObjectType) { // Use create functions
+                    case "Simple House": newObject = createSimpleHouse(); break;
+                    case "Tree": newObject = createTree(); break;
+                    case "Rock": newObject = createRock(); break;
+                    case "Fence Post": newObject = createFencePost(); break;
+                    default: console.warn("Unknown object type:", selectedObjectType); return;
                 }
                 if (newObject) {
+                    newObject.position.copy(intersectPoint);
+                    // Adjust Y based on object's geometry center if needed (already done in create funcs mostly)
+                    if (newObject.geometry && newObject.geometry.boundingBox) {
+                       // Optional fine-tuning if origin isn't at base
+                    } else if (newObject.type === "Group") {
+                         // Assume group origin is logical base
+                    }
                     scene.add(newObject);
+                    placedObjects.push(newObject);
                 }
             }
         }
+        function onKeyDown(event) { keysPressed[event.code] = true; }
+        function onKeyUp(event) { keysPressed[event.code] = false; }
+        function onSaveClick() {
+            console.log("Save button clicked.");
+            const objectsToSave = placedObjects.map(obj => {
+                // IMPORTANT: Need to know the TYPE of the object placed
+                // We added `userData.type` in the create functions
+                const type = obj.userData.type || "Unknown"; // Get stored type
+                 // Simplify rotation: Use Euler angles which are often easier to serialize/deserialize than Quaternions
+                const rotation = {
+                    _x: obj.rotation.x,
+                    _y: obj.rotation.y,
+                    _z: obj.rotation.z,
+                    _order: obj.rotation.order // Important!
+                };
+                return {
+                    type: type,
+                    position: { x: obj.position.x, y: obj.position.y, z: obj.position.z },
+                    // Store Euler rotation instead of quaternion for simplicity here
+                    rotation: rotation
+                    // quaternion: { _x: obj.quaternion.x, _y: obj.quaternion.y, _z: obj.quaternion.z, _w: obj.quaternion.w } // Alternative
+                };
+            }).filter(obj => obj.type !== "Unknown"); // Don't save unknowns
+            const saveDataJson = JSON.stringify(objectsToSave);
+            const saveDataEncoded = encodeURIComponent(saveDataJson);
+            // Construct URL with save data, space ID, and name
+            const params = new URLSearchParams();
+            params.set('save_data', saveDataEncoded);
+            if (currentSpaceId) {
+                 params.set('space_id', currentSpaceId);
+            }
+             if (currentSpaceName) { // Send current name from sidebar input
+                 params.set('space_name', encodeURIComponent(currentSpaceName));
+             }
+            console.log("Redirecting to save...");
+            // Trigger reload with query parameters
+            window.location.search = params.toString();
+        }
+        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);
+                // Apply movement relative to player's current orientation (if needed)
+                // For simple world-axis movement:
+                 playerMesh.position.add(moveDirection);
+                 // Collision detection would go here!
+                // Basic ground clamping (prevent falling through)
+                playerMesh.position.y = Math.max(playerMesh.position.y, 0.4 + 0.8/2); // Adjust based on capsule size
+            }
+        }
+        function updateCamera() {
+            if (!playerMesh) return;
+            // Simple third-person follow cam
+            const offset = new THREE.Vector3(0, 5, 10); // Camera distance from player
+             // Can be enhanced to use player rotation later
+            const targetPosition = playerMesh.position.clone().add(offset);
+            // Smooth camera movement (Lerp)
+            camera.position.lerp(targetPosition, 0.1); // Adjust lerp factor for smoothness
+            camera.lookAt(playerMesh.position); // Always look at the player
+        }
          function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         }
         function animate() {
             requestAnimationFrame(animate);
+            updatePlayerMovement();
+            updateCamera(); // Make camera follow player
             renderer.render(scene, camera);
         }