Update index.html

index.html

@@ -24,7 +24,7 @@
             scene = new THREE.Scene();
             // Orthographic camera for top-down view
             const aspect = window.innerWidth / window.innerHeight;
-            const viewSize = plotWidth * 0.6;
+            const viewSize = plotWidth / 2; // Half of plotWidth for centered view
             camera = new THREE.OrthographicCamera(
                 -viewSize * aspect, viewSize * aspect,
                 viewSize, -viewSize,
@@ -37,10 +37,18 @@
             renderer.setSize(window.innerWidth, window.innerHeight);
             document.body.appendChild(renderer.domElement);
 
+            // Add lighting
+            const ambientLight = new THREE.AmbientLight(0x404040);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+            directionalLight.position.set(0, 10, 0);
+            scene.add(directionalLight);
+
             const groundGeometry = new THREE.PlaneGeometry(plotWidth, plotDepth);
-            const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });
+            const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x888888 });
             const ground = new THREE.Mesh(groundGeometry, groundMaterial);
             ground.rotation.x = -Math.PI / 2;
+            ground.name = 'ground';
             scene.add(ground);
 
             const gridHelper = new THREE.GridHelper(plotWidth, plotWidth / 2);
@@ -66,6 +74,7 @@
             websocket.onopen = () => console.log('WebSocket connected');
             websocket.onmessage = (event) => {
                 const data = JSON.parse(event.data);
+                console.log('Received message:', data);
                 if (data.type === 'initial_state' || data.type === 'object_placed') {
                     const objects = data.type === 'initial_state' ? data.payload : { [data.payload.object_data.obj_id]: data.payload.object_data };
                     for (let obj_id in objects) {
@@ -93,89 +102,91 @@
         }
 
         function addObjectToScene(objData) {
+            console.log('Adding object:', objData);
             let geometry, material, mesh;
             switch (objData.type) {
                 case 'Cube':
                     geometry = new THREE.BoxGeometry(1, 1, 1);
-                    material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+                    material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
                     break;
                 case 'Sphere':
                     geometry = new THREE.SphereGeometry(0.5, 32, 32);
-                    material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+                    material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
                     break;
                 case 'Cylinder':
                     geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
-                    material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
+                    material = new THREE.MeshLambertMaterial({ color: 0x0000ff });
                     break;
                 case 'Cone':
                     geometry = new THREE.ConeGeometry(0.5, 1, 32);
-                    material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
+                    material = new THREE.MeshLambertMaterial({ color: 0xffff00 });
                     break;
                 case 'Torus':
                     geometry = new THREE.TorusGeometry(0.4, 0.1, 16, 100);
-                    material = new THREE.MeshBasicMaterial({ color: 0xff00ff });
+                    material = new THREE.MeshLambertMaterial({ color: 0xff00ff });
                     break;
                 case 'Tree':
                     geometry = new THREE.ConeGeometry(0.5, 2, 8);
-                    material = new THREE.MeshBasicMaterial({ color: 0x228B22 });
+                    material = new THREE.MeshLambertMaterial({ color: 0x228B22 });
                     break;
                 case 'Rock':
                     geometry = new THREE.DodecahedronGeometry(0.5);
-                    material = new THREE.MeshBasicMaterial({ color: 0x808080 });
+                    material = new THREE.MeshLambertMaterial({ color: 0x808080 });
                     break;
                 case 'Simple House':
                     geometry = new THREE.BoxGeometry(2, 1.5, 2);
-                    material = new THREE.MeshBasicMaterial({ color: 0xA52A2A });
+                    material = new THREE.MeshLambertMaterial({ color: 0xA52A2A });
                     break;
                 case 'Pine Tree':
                     geometry = new THREE.ConeGeometry(0.3, 1.5, 8);
-                    material = new THREE.MeshBasicMaterial({ color: 0x006400 });
+                    material = new THREE.MeshLambertMaterial({ color: 0x006400 });
                     break;
                 case 'Brick Wall':
                     geometry = new THREE.BoxGeometry(3, 1, 0.2);
-                    material = new THREE.MeshBasicMaterial({ color: 0x8B4513 });
+                    material = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
                     break;
                 case 'Mushroom':
                     geometry = new THREE.SphereGeometry(0.5, 32, 16, 0, Math.PI);
-                    material = new THREE.MeshBasicMaterial({ color: 0xF5F5DC });
+                    material = new THREE.MeshLambertMaterial({ color: 0xF5F5DC });
                     break;
                 case 'Cactus':
                     geometry = new THREE.CylinderGeometry(0.2, 0.2, 1.5, 8);
-                    material = new THREE.MeshBasicMaterial({ color: 0x2E8B57 });
+                    material = new THREE.MeshLambertMaterial({ color: 0x2E8B57 });
                     break;
                 case 'Campfire':
                     geometry = new THREE.DodecahedronGeometry(0.3);
-                    material = new THREE.MeshBasicMaterial({ color: 0xFF4500 });
+                    material = new THREE.MeshLambertMaterial({ color: 0xFF4500 });
                     break;
                 case 'Star':
                     geometry = new THREE.SphereGeometry(0.3, 4, 2);
-                    material = new THREE.MeshBasicMaterial({ color: 0xFFFF00 });
+                    material = new THREE.MeshLambertMaterial({ color: 0xFFFF00 });
                     break;
                 case 'Gem':
                     geometry = new THREE.OctahedronGeometry(0.4);
-                    material = new THREE.MeshBasicMaterial({ color: 0x00CED1 });
+                    material = new THREE.MeshLambertMaterial({ color: 0x00CED1 });
                     break;
                 case 'Tower':
                     geometry = new THREE.CylinderGeometry(0.3, 0.5, 2, 8);
-                    material = new THREE.MeshBasicMaterial({ color: 0x708090 });
+                    material = new THREE.MeshLambertMaterial({ color: 0x708090 });
                     break;
                 case 'Barrier':
                     geometry = new THREE.BoxGeometry(2, 0.5, 0.2);
-                    material = new THREE.MeshBasicMaterial({ color: 0x696969 });
+                    material = new THREE.MeshLambertMaterial({ color: 0x696969 });
                     break;
                 case 'Fountain':
                     geometry = new THREE.CylinderGeometry(0.5, 0.3, 1, 32);
-                    material = new THREE.MeshBasicMaterial({ color: 0x4682B4 });
+                    material = new THREE.MeshLambertMaterial({ color: 0x4682B4 });
                     break;
                 case 'Lantern':
                     geometry = new THREE.BoxGeometry(0.3, 0.5, 0.3);
-                    material = new THREE.MeshBasicMaterial({ color: 0xFFD700 });
+                    material = new THREE.MeshLambertMaterial({ color: 0xFFD700 });
                     break;
                 case 'Sign Post':
                     geometry = new THREE.BoxGeometry(0.2, 1, 0.2);
-                    material = new THREE.MeshBasicMaterial({ color: 0x8B4513 });
+                    material = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
                     break;
                 default:
+                    console.warn('Unknown object type:', objData.type);
                     return;
             }
             mesh = new THREE.Mesh(geometry, material);
@@ -183,12 +194,14 @@
             mesh.rotation.set(objData.rotation.x, objData.rotation.y, objData.rotation.z);
             mesh.name = objData.obj_id;
             scene.add(mesh);
+            console.log('Object added to scene:', objData.obj_id);
         }
 
         function removeObjectFromScene(obj_id) {
             const object = scene.getObjectByName(obj_id);
             if (object) {
                 scene.remove(object);
+                console.log('Object removed:', obj_id);
             }
         }
 
@@ -204,16 +217,18 @@
 
             if (event.button === 0 && selectedObjectType !== 'None') {
                 for (let intersect of intersects) {
-                    if (intersect.object.name === '') { // Ground plane
+                    if (intersect.object.name === 'ground') {
                         const position = intersect.point;
-                        position.y = 0.5; // Adjust height above ground
+                        position.y = 0.5; // Place above ground
+                        console.log('Placing object at:', position);
                         placeObject(position);
                         break;
                     }
                 }
             } else if (event.button === 2) {
                 for (let intersect of intersects) {
-                    if (intersect.object.name && intersect.object.name !== '') {
+                    if (intersect.object.name && intersect.object.name !== 'ground') {
+                        console.log('Deleting object:', intersect.object.name);
                         websocket.send(JSON.stringify({
                             type: 'delete_object',
                             payload: { obj_id: intersect.object.name, username }
@@ -233,6 +248,7 @@
                 position: { x: position.x, y: position.y, z: position.z },
                 rotation: { x: 0, y: 0, z: 0 }
             };
+            console.log('Sending place_object:', objectData);
             websocket.send(JSON.stringify({
                 type: 'place_object',
                 payload: { username, object_data: objectData }