zyqunix/tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

block visualizer

Browse source
This commit is contained in:
zyqunix 2025-01-12 21:21:42 +01:00
parent 0e5890eae0
commit e5449fda26
4 changed files with 1294 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
visualizer/index.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Tank with Blocks</title>
<style>
body {
margin: 0;
padding: 0;
}
canvas {
width: 100%;
height: 100%
}
#controls {
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
color: white;
font-family: Arial, sans-serif;
}
input {
margin-bottom: 10px;
width: 100px;
}
</style>
</head>
<body>
<div id="controls">
<label for="length">Length:</label>
<input type="number" id="length" min="1" max="20" value="8"><br>
<label for="width">Width:</label>
<input type="number" id="width" min="1" max="20" value="8"><br>
<label for="height">Height:</label>
<input type="number" id="height" min="1" max="20" value="8"><br>
<label for="margin">Margin:</label>
<input type="number" id="margin" min="0" max="5" step="0.1" value="0.2"><br>
<button id="updateScene" onclick="location.reload()">Update Scene</button>
</div>
<canvas id="renderCanvas"></canvas>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="index.js"></script>
</body>
</html>

107
visualizer/index.js Normal file
View file

@ -0,0 +1,107 @@
let blockCount = 0;
function createScene(engine, canvas, length, width, height, margin) {
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
light.intensity = 0.7;
const blockSize = 1;
scene.meshes.forEach(mesh => {
if (mesh.name === 'block' || mesh.name === 'borderBlock') {
mesh.dispose();
}
});
blockCount = 0;
for (let x = 0; x < length; x++) {
for (let y = 0; y < width; y++) {
for (let z = 0; z < height; z++) {
if (x === 0 || x === length - 1 || y === 0 || y === width - 1 || z === 0 || z === height - 1) {
createBlock(scene, x * (blockSize + margin), y * (blockSize + margin), z * (blockSize + margin), blockSize);
blockCount++;
}
}
}
}
const countText = new BABYLON.GUI.TextBlock();
countText.text = "Blocks: " + blockCount;
countText.color = "white";
countText.fontSize = 24;
countText.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
countText.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
advancedTexture.addControl(countText);
return scene;
}
function createBlock(scene, x, y, z, size) {
const block = BABYLON.MeshBuilder.CreateBox("block", {
size: size
}, scene);
block.position = new BABYLON.Vector3(x, y, z);
const blockMaterial = new BABYLON.StandardMaterial("blockMaterial", scene);
blockMaterial.diffuseColor = new BABYLON.Color3(0.7, 0.7, 0.7);
block.material = blockMaterial;
const borderMaterial = new BABYLON.StandardMaterial("borderMaterial", scene);
borderMaterial.emissiveColor = new BABYLON.Color3(0, 0, 0);
const borderBlock = BABYLON.MeshBuilder.CreateBox("borderBlock", {
size: size + 0.1
}, scene);
borderBlock.position = new BABYLON.Vector3(x, y, z);
borderBlock.material = borderMaterial;
}
window.addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
let length = parseInt(document.getElementById("length").value);
let width = parseInt(document.getElementById("width").value);
let height = parseInt(document.getElementById("height").value);
let margin = parseFloat(document.getElementById("margin").value);
const scene = createScene(engine, canvas, length, width, height, margin);
document.getElementById("updateScene").addEventListener("click", () => {
length = parseInt(document.getElementById("length").value);
width = parseInt(document.getElementById("width").value);
height = parseInt(document.getElementById("height").value);
margin = parseFloat(document.getElementById("margin").value);
createScene(engine, canvas, length, width, height, margin);
});
engine.runRenderLoop(() => {
scene.render();
});
window.addEventListener("resize", () => {
engine.resize();
});
});

1096
visualizer/js/OrbitalControls.js Normal file
View file

File diff suppressed because it is too large Load diff

36
visualizer/style.css Normal file
View file

@ -0,0 +1,36 @@
body {
font-family: Arial, sans-serif;
margin: 0 60px 50px 60px;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f4f4f4;
overflow-x: hidden;
overflow-y: hidden;
}
h1 {
margin: 20px;
}
#form-container {
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
input,
button {
margin: 10px;
font-size: 14px;
}
#canvas-container {
width: 800px;
height: 600px;
border: 1px solid #ccc;
}