awacke1 commited on
Commit
160b281
·
verified ·
1 Parent(s): 7eb6a2c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +47 -28
index.html CHANGED
@@ -11,7 +11,7 @@
11
  </style>
12
  </head>
13
  <body>
14
- <div id="info">Click to place selected object, right-click to delete.</div>
15
  <script type="importmap">
16
  {
17
  "imports": {
@@ -132,7 +132,6 @@
132
  for (const obj_id in objects) {
133
  createAndPlaceObject(objects[obj_id], false);
134
  }
135
- // Initialize player positions (visualize as markers)
136
  const players = worldState.players || {};
137
  for (const username in players) {
138
  const pos = players[username].position;
@@ -146,7 +145,6 @@
146
  scene.remove(mesh);
147
  }
148
  worldObjects.clear();
149
- // Clear player markers
150
  scene.children.forEach(child => {
151
  if (child.userData.isPlayerMarker) {
152
  scene.remove(child);
@@ -488,8 +486,6 @@
488
  }
489
 
490
  function onDocumentClick(event) {
491
- if (selectedObjectType === "None" || !selectedObjectType) return;
492
-
493
  const groundCandidates = Object.values(groundMeshes);
494
  if (groundCandidates.length === 0) return;
495
 
@@ -499,31 +495,46 @@
499
  if (intersects.length > 0) {
500
  const intersectPoint = intersects[0].point;
501
 
502
- const newObjData = {
503
- obj_id: THREE.MathUtils.generateUUID(),
504
- type: selectedObjectType,
505
- position: { x: intersectPoint.x, y: 0, z: intersectPoint.z },
506
- rotation: { _x: 0, _y: Math.random() * Math.PI * 2, _z: 0, _order: 'XYZ' }
507
- };
508
-
509
- const tempMesh = createPrimitiveMesh(selectedObjectType);
510
- if (tempMesh && tempMesh.geometry) {
511
- tempMesh.geometry.computeBoundingBox();
512
- const height = tempMesh.geometry.boundingBox.max.y - tempMesh.geometry.boundingBox.min.y;
513
- newObjData.position.y = (height / 2) + intersectPoint.y + 0.01;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
514
  } else {
515
- newObjData.position.y = 0.5 + intersectPoint.y;
 
 
 
 
 
 
 
 
 
 
 
516
  }
517
-
518
- console.log(`Placing ${selectedObjectType} (${newObjData.obj_id}) at`, newObjData.position);
519
-
520
- createAndPlaceObject(newObjData, true);
521
-
522
- // Send place action to Streamlit
523
- window.parent.postMessage({
524
- type: 'place_object',
525
- payload: { username: myUsername, object_data: newObjData }
526
- }, '*');
527
  }
528
  }
529
 
@@ -577,6 +588,14 @@
577
  createAndPlaceObject(data.payload.object_data, false);
578
  } else if (data.type === 'delete_object') {
579
  removeObjectById(data.payload.obj_id);
 
 
 
 
 
 
 
 
580
  }
581
  });
582
 
 
11
  </style>
12
  </head>
13
  <body>
14
+ <div id="info">Click to place selected object or move player, right-click to delete.</div>
15
  <script type="importmap">
16
  {
17
  "imports": {
 
132
  for (const obj_id in objects) {
133
  createAndPlaceObject(objects[obj_id], false);
134
  }
 
135
  const players = worldState.players || {};
136
  for (const username in players) {
137
  const pos = players[username].position;
 
145
  scene.remove(mesh);
146
  }
147
  worldObjects.clear();
 
148
  scene.children.forEach(child => {
149
  if (child.userData.isPlayerMarker) {
150
  scene.remove(child);
 
486
  }
487
 
488
  function onDocumentClick(event) {
 
 
489
  const groundCandidates = Object.values(groundMeshes);
490
  if (groundCandidates.length === 0) return;
491
 
 
495
  if (intersects.length > 0) {
496
  const intersectPoint = intersects[0].point;
497
 
498
+ if (selectedObjectType !== "None" && selectedObjectType) {
499
+ // Place object
500
+ const newObjData = {
501
+ obj_id: THREE.MathUtils.generateUUID(),
502
+ type: selectedObjectType,
503
+ position: { x: intersectPoint.x, y: 0, z: intersectPoint.z },
504
+ rotation: { _x: 0, _y: Math.random() * Math.PI * 2, _z: 0, _order: 'XYZ' }
505
+ };
506
+
507
+ const tempMesh = createPrimitiveMesh(selectedObjectType);
508
+ if (tempMesh && tempMesh.geometry) {
509
+ tempMesh.geometry.computeBoundingBox();
510
+ const height = tempMesh.geometry.boundingBox.max.y - tempMesh.geometry.boundingBox.min.y;
511
+ newObjData.position.y = (height / 2) + intersectPoint.y + 0.01;
512
+ } else {
513
+ newObjData.position.y = 0.5 + intersectPoint.y;
514
+ }
515
+
516
+ console.log(`Placing ${selectedObjectType} (${newObjData.obj_id}) at`, newObjData.position);
517
+
518
+ createAndPlaceObject(newObjData, true);
519
+
520
+ window.parent.postMessage({
521
+ type: 'place_object',
522
+ payload: { username: myUsername, object_data: newObjData }
523
+ }, '*');
524
  } else {
525
+ // Move player
526
+ const newPosition = {
527
+ x: intersectPoint.x,
528
+ y: 0.5,
529
+ z: intersectPoint.z
530
+ };
531
+ console.log(`Moving player ${myUsername} to`, newPosition);
532
+
533
+ window.parent.postMessage({
534
+ type: 'move_player',
535
+ payload: { username: myUsername, position: newPosition }
536
+ }, '*');
537
  }
 
 
 
 
 
 
 
 
 
 
538
  }
539
  }
540
 
 
588
  createAndPlaceObject(data.payload.object_data, false);
589
  } else if (data.type === 'delete_object') {
590
  removeObjectById(data.payload.obj_id);
591
+ } else if (data.type === 'move_player') {
592
+ const username = data.payload.username;
593
+ const position = data.payload.position;
594
+ scene.children.forEach(child => {
595
+ if (child.userData.isPlayerMarker && child.userData.username === username) {
596
+ child.position.set(position.x, position.y + 0.5, position.z);
597
+ }
598
+ });
599
  }
600
  });
601