Spaces:
Sleeping
Sleeping
Update index.html
Browse files- index.html +26 -16
index.html
CHANGED
|
@@ -10,7 +10,9 @@
|
|
| 10 |
<body>
|
| 11 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
|
| 12 |
<script>
|
| 13 |
-
//
|
|
|
|
|
|
|
| 14 |
const scene = new THREE.Scene();
|
| 15 |
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
| 16 |
const renderer = new THREE.WebGLRenderer();
|
|
@@ -21,7 +23,6 @@
|
|
| 21 |
let playerPos = [0, 0];
|
| 22 |
const chunks = new Map();
|
| 23 |
|
| 24 |
-
// Create a chunk mesh from heightmap
|
| 25 |
function createChunkMesh(chunkData, chunkX, chunkZ) {
|
| 26 |
const geometry = new THREE.BufferGeometry();
|
| 27 |
const vertices = [];
|
|
@@ -57,33 +58,43 @@
|
|
| 57 |
return mesh;
|
| 58 |
}
|
| 59 |
|
| 60 |
-
// Fetch and update world
|
| 61 |
async function move(dx, dz) {
|
| 62 |
-
|
| 63 |
-
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
|
| 68 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 69 |
}
|
| 70 |
-
updateCamera();
|
| 71 |
}
|
| 72 |
|
| 73 |
-
// Camera follows player
|
| 74 |
function updateCamera() {
|
| 75 |
camera.position.set(playerPos[0], 10, playerPos[1] + 10);
|
| 76 |
camera.lookAt(playerPos[0], 0, playerPos[1]);
|
| 77 |
}
|
| 78 |
|
| 79 |
-
// Animation loop
|
| 80 |
function animate() {
|
| 81 |
requestAnimationFrame(animate);
|
| 82 |
renderer.render(scene, camera);
|
| 83 |
}
|
| 84 |
animate();
|
| 85 |
|
| 86 |
-
// Keyboard controls
|
| 87 |
document.addEventListener('keydown', (event) => {
|
| 88 |
switch (event.key) {
|
| 89 |
case 'ArrowUp': move(0, -1); break;
|
|
@@ -93,8 +104,7 @@
|
|
| 93 |
}
|
| 94 |
});
|
| 95 |
|
| 96 |
-
// Initial load
|
| 97 |
-
move(0, 0);
|
| 98 |
</script>
|
| 99 |
</body>
|
| 100 |
</html>
|
|
|
|
| 10 |
<body>
|
| 11 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
|
| 12 |
<script>
|
| 13 |
+
// Replace with your Hugging Face Space URL when deployed
|
| 14 |
+
const BASE_URL = window.location.hostname === "localhost" ? "http://localhost:7860" : "https://<username>-<space-name>.hf.space";
|
| 15 |
+
|
| 16 |
const scene = new THREE.Scene();
|
| 17 |
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
| 18 |
const renderer = new THREE.WebGLRenderer();
|
|
|
|
| 23 |
let playerPos = [0, 0];
|
| 24 |
const chunks = new Map();
|
| 25 |
|
|
|
|
| 26 |
function createChunkMesh(chunkData, chunkX, chunkZ) {
|
| 27 |
const geometry = new THREE.BufferGeometry();
|
| 28 |
const vertices = [];
|
|
|
|
| 58 |
return mesh;
|
| 59 |
}
|
| 60 |
|
|
|
|
| 61 |
async function move(dx, dz) {
|
| 62 |
+
try {
|
| 63 |
+
// Gradio doesn’t expose /move, so we fetch the root and simulate
|
| 64 |
+
const response = await fetch(`${BASE_URL}/api/predict`, {
|
| 65 |
+
method: "POST",
|
| 66 |
+
headers: { "Content-Type": "application/json" },
|
| 67 |
+
body: JSON.stringify({
|
| 68 |
+
"fn_index": 0, // Index of move_player function in Blocks
|
| 69 |
+
"data": [dx, dz, null] // dx, dz, and null for state
|
| 70 |
+
})
|
| 71 |
+
});
|
| 72 |
+
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
|
| 73 |
+
const result = await response.json();
|
| 74 |
+
const data = JSON.parse(result.data[1]); // Parse the JSON string from output
|
| 75 |
+
playerPos = data.player_pos;
|
| 76 |
+
const key = `${data.chunk_coords[0]},${data.chunk_coords[1]}`;
|
| 77 |
+
if (!chunks.has(key)) {
|
| 78 |
+
const mesh = createChunkMesh(data.chunk, data.chunk_coords[0], data.chunk_coords[1]);
|
| 79 |
+
chunks.set(key, mesh);
|
| 80 |
+
}
|
| 81 |
+
updateCamera();
|
| 82 |
+
} catch (error) {
|
| 83 |
+
console.error('Fetch error:', error);
|
| 84 |
}
|
|
|
|
| 85 |
}
|
| 86 |
|
|
|
|
| 87 |
function updateCamera() {
|
| 88 |
camera.position.set(playerPos[0], 10, playerPos[1] + 10);
|
| 89 |
camera.lookAt(playerPos[0], 0, playerPos[1]);
|
| 90 |
}
|
| 91 |
|
|
|
|
| 92 |
function animate() {
|
| 93 |
requestAnimationFrame(animate);
|
| 94 |
renderer.render(scene, camera);
|
| 95 |
}
|
| 96 |
animate();
|
| 97 |
|
|
|
|
| 98 |
document.addEventListener('keydown', (event) => {
|
| 99 |
switch (event.key) {
|
| 100 |
case 'ArrowUp': move(0, -1); break;
|
|
|
|
| 104 |
}
|
| 105 |
});
|
| 106 |
|
| 107 |
+
move(0, 0); // Initial load
|
|
|
|
| 108 |
</script>
|
| 109 |
</body>
|
| 110 |
</html>
|