Spaces:
Sleeping
Sleeping
Update index.html
Browse files- 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 |
-
|
503 |
-
|
504 |
-
|
505 |
-
|
506 |
-
|
507 |
-
|
508 |
-
|
509 |
-
|
510 |
-
|
511 |
-
tempMesh
|
512 |
-
|
513 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
514 |
} else {
|
515 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
|