Created
August 8, 2024 05:57
-
-
Save MBlore/21957e4efd8075a51b25aaabec37bd38 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
| <title>Babylon Template</title> | |
| <style> | |
| html, body { | |
| overflow: hidden; | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #renderCanvas { | |
| width: 100%; | |
| height: 100%; | |
| touch-action: none; | |
| } | |
| </style> | |
| <script src="https://cdn.babylonjs.com/babylon.js"></script> | |
| </head> | |
| <body> | |
| <canvas id="renderCanvas"></canvas> | |
| <script> | |
| const canvas = document.getElementById("renderCanvas"); // Get the canvas element | |
| const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine | |
| const createScene = function () { | |
| // Creates a basic Babylon Scene object | |
| const scene = new BABYLON.Scene(engine); | |
| scene.ambientColor = new BABYLON.Color3(0.5, 0.5, 0.5); | |
| // Creates and positions a free camera | |
| const camera = new BABYLON.FreeCamera("camera1", | |
| new BABYLON.Vector3(0, 5, -10), scene); | |
| // Targets the camera to scene origin | |
| camera.setTarget(BABYLON.Vector3.Zero()); | |
| // This attaches the camera to the canvas | |
| camera.attachControl(canvas, true); | |
| // Creates a light, aiming 0,1,0 - to the sky | |
| const light = new BABYLON.HemisphericLight("light", | |
| new BABYLON.Vector3(0, 1, 0), scene); | |
| // Dim the light a small amount - 0 to 1 | |
| light.intensity = 0.75; | |
| const groundEnable = true; | |
| const serverEnable = true; | |
| if (groundEnable) { | |
| // Built-in 'ground' shape. | |
| const ground = BABYLON.MeshBuilder.CreateGround("ground", | |
| {width: 100, height: 100}, scene); | |
| } | |
| function createServer(name) { | |
| // A server. | |
| const box = BABYLON.MeshBuilder.CreateBox("box", {height: 0.6, width: 5, depth: 5}, scene); | |
| const boxMat = new BABYLON.StandardMaterial("material1", scene); | |
| boxMat.diffuseColor = new BABYLON.Color3(0.25, 0.5, 0.75); | |
| boxMat.specularColor = new BABYLON.Color3(1, 1, 1); | |
| boxMat.specularPower = 64; | |
| boxMat.ambientColor = new BABYLON.Color3(0.2, 0.2, 0.2); | |
| box.material = boxMat; | |
| // Create the plane. | |
| const plane = BABYLON.MeshBuilder.CreatePlane("plane", {height:1, width: 5}, scene); | |
| const dynamicTexture = new BABYLON.DynamicTexture("dynamicTexture", {width:512, height:102}, scene); | |
| dynamicTexture.hasAlpha = true; | |
| dynamicTexture.drawText(name, null, 100, "bold 42px Consolas", "white", "transparent"); | |
| // Text material. | |
| const material = new BABYLON.StandardMaterial("textPlaneMaterial", scene); | |
| material.diffuseColor = new BABYLON.Color3(1, 1, 1); | |
| material.specularColor = new BABYLON.Color3(1, 1, 1); | |
| material.specularPower = 64; | |
| material.ambientColor = new BABYLON.Color3(1, 1, 1); | |
| material.diffuseTexture = dynamicTexture; | |
| material.backFaceCulling = false; | |
| material.alpha = 1; | |
| plane.material = material; | |
| // Position label. | |
| plane.position.z = -2.51; | |
| plane.position.y = 0.32; | |
| plane.parent = box; | |
| return box; | |
| } | |
| function createTower(name, postname, count, x, z) { | |
| for (let i = 0; i < count; i++) { | |
| const num = String(i).padStart(2, "0"); | |
| const label = name + num + postname; | |
| const s = createServer(label); | |
| s.position.y = 1 + (0.7 * i); | |
| s.position.x = x; | |
| s.position.z = z; | |
| } | |
| } | |
| createTower("US1XXXXXXXX", "P0", 20, 0, 0); | |
| createTower("US1XXXXXXXX", "P1", 20, 6, 0); | |
| createTower("US2XXXXXXXX", "P0", 20, 15, 0); | |
| createTower("US2XXXXXXXX", "P1", 20, 21, 0); | |
| return scene; | |
| }; | |
| const scene = createScene(); //Call the createScene function | |
| // Register a render loop to repeatedly render the scene | |
| engine.runRenderLoop(function () { | |
| scene.render(); | |
| }); | |
| // Watch for browser/canvas resize events | |
| window.addEventListener("resize", function () { | |
| engine.resize(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment