Spaces:

eaglelandsonce
/

threejshcl

Running

App Files Files Community

eaglelandsonce commited on Aug 6

Commit

15de190

verified ·

1 Parent(s): 6430538

Update index.html

Browse files

Files changed (1) hide show

index.html +78 -99

index.html CHANGED Viewed

@@ -3,43 +3,31 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Terraform 3D Icon Visualizer [Correctly Served]</title>
     <style>
-        body { margin: 0; background-color: #0d1117; color: white; font-family: sans-serif; overflow: hidden; }
         canvas { display: block; }
-        #loader {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 200;
-            color: #c9d1d9;
-            font-size: 1.5em;
-        }
-        #info {
-            position: absolute;
-            top: 10px;
-            width: 100%;
-            text-align: center;
-            z-index: 100;
-            color: #c9d1d9;
-            font-size: 1.2em;
-        }
-        #tooltip {
-            position: absolute;
-            display: none;
-            padding: 10px;
-            background-color: rgba(30, 30, 40, 0.85);
-            border: 1px solid #444;
-            border-radius: 5px;
-            pointer-events: none;
-        }
     </style>
 </head>
 <body>
     <div id="info">Terraform Azure 3D Visualizer</div>
-    <div id="loader">Loading 3D Models...</div>
     <div id="tooltip"></div>
     <script type="importmap">
         {
             "imports": {
@@ -49,13 +37,28 @@
         }
     </script>
     <script type="module">
         import * as THREE from 'three';
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
         import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
         import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
-        // --- Terraform Code ---
         const terraformCode = `
             resource "azurerm_resource_group" "tfexample" { name = "my-terraform-rg" }
             resource "azurerm_virtual_network" "tfexample" { resource_group_name = azurerm_resource_group.tfexample.name }
@@ -65,7 +68,7 @@
             resource "azurerm_linux_virtual_machine_scale_set" "tfexample" { subnet_id = azurerm_subnet.tfexample.id }
         `;
-        // --- Parser ---
         function parseTerraform(code) {
             const resources = [], dependencies = new Set(), regex = /resource "([\w_]+)" "([\w_]+)"/g;
             let match;
@@ -78,7 +81,7 @@
             return { nodes: resources, edges: Array.from(dependencies).map(d => JSON.parse(d)) };
         }
-        // --- Icon Map ---
         const iconMap = {
             "azurerm_resource_group": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/resourcegroup.svg",
             "azurerm_virtual_network": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/virtualnetwork.svg",
@@ -89,70 +92,49 @@
             "default": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/resource.svg"
         };
-        // --- Global Variables ---
         let camera, scene, renderer, labelRenderer, controls;
-        const nodes = {}; // Map from node.id to Three.js object
-        const intersectableObjects = []; // For raycasting
-        /**
-         * Creates a 3D visual node for a resource, returning a Promise
-         */
         function createNodeVisual(node, position) {
             return new Promise((resolve, reject) => {
                 const is3D = node.type === 'azurerm_resource_group' || node.type === 'azurerm_virtual_network';
                 if (is3D) {
-                    // --- Create 3D Extruded Icon ---
-                    const iconUrl = iconMap[node.type] || iconMap.default;
-                    const svgLoader = new SVGLoader();
-                    svgLoader.load(iconUrl, (data) => {
                         const iconGroup = new THREE.Group();
                         const extrudeSettings = { depth: 0.8, bevelEnabled: true, bevelThickness: 0.2, bevelSize: 0.1, bevelSegments: 2 };
                         data.paths.forEach(path => {
                             const material = new THREE.MeshStandardMaterial({ color: path.color, metalness: 0.5, roughness: 0.5 });
-                            const shapes = SVGLoader.createShapes(path);
-                            shapes.forEach(shape => {
                                 const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
-                                geometry.center(); // Center the geometry itself
-                                const mesh = new THREE.Mesh(geometry, material);
-                                iconGroup.add(mesh);
                             });
                         });
                         const box = new THREE.Box3().setFromObject(iconGroup);
-                        const scale = 5 / box.getSize(new THREE.Vector3()).length();
-                        iconGroup.scale.set(scale, scale, scale);
                         iconGroup.position.copy(position);
                         resolve(iconGroup);
-                    }, undefined, (error) => {
-                        console.error(`Failed to load SVG for ${node.id}:`, error);
-                        reject(error);
-                    });
                 } else {
-                    // --- Create 2D Sprite Icon (Fallback) ---
-                    const iconUrl = iconMap[node.type] || iconMap.default;
-                    const textureLoader = new THREE.TextureLoader();
-                    textureLoader.load(iconUrl, (map) => {
-                        const material = new THREE.SpriteMaterial({ map: map });
-                        const sprite = new THREE.Sprite(material);
                         sprite.scale.set(6, 6, 6);
                         sprite.position.copy(position);
                         resolve(sprite);
-                    }, undefined, (error) => {
-                        console.error(`Failed to load texture for ${node.id}:`, error);
-                        reject(error);
-                    });
                 }
             });
         }
-        /**
-         * Main function to initialize the scene and run the visualizer
-         */
         async function init() {
-            // --- Basic Scene Setup ---
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x0d1117);
             camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
@@ -172,53 +154,50 @@
             dirLight.position.set(8, 15, 10);
             scene.add(dirLight);
-            // --- Load and Create All Nodes ---
             const graph = parseTerraform(terraformCode);
             const nodePromises = graph.nodes.map((node, index) => {
                 const angle = (index / graph.nodes.length) * Math.PI * 2;
                 const position = new THREE.Vector3(30 * Math.cos(angle), (Math.random() - 0.5) * 15, 30 * Math.sin(angle));
                 return createNodeVisual(node, position);
             });
-            // --- Wait for all nodes to be loaded ---
             const loadedNodes = await Promise.all(nodePromises);
-            document.getElementById('loader').style.display = 'none'; // Hide loader
-            // --- Add nodes to scene and map ---
             loadedNodes.forEach((visualNode, index) => {
                 const nodeInfo = graph.nodes[index];
                 visualNode.userData = { id: nodeInfo.id, type: nodeInfo.type };
                 nodes[nodeInfo.id] = visualNode;
                 intersectableObjects.push(visualNode);
                 scene.add(visualNode);
                 const labelDiv = document.createElement('div');
                 labelDiv.textContent = nodeInfo.id;
                 labelDiv.style.color = '#c9d1d9';
                 labelDiv.style.fontSize = '12px';
                 labelDiv.style.marginTop = '-1em';
                 const label = new CSS2DObject(labelDiv);
-                label.position.set(0, -5, 0); // Position label below icon
                 visualNode.add(label);
             });
-            // --- Draw Dependency Lines ---
             graph.edges.forEach(edge => {
                 const startNode = nodes[edge.from];
                 const endNode = nodes[edge.to];
                 if (startNode && endNode) {
-                    const material = new THREE.LineBasicMaterial({ color: 0x3081f8, transparent: true, opacity: 0.7 });
                     const geometry = new THREE.BufferGeometry().setFromPoints([startNode.position, endNode.position]);
-                    const line = new THREE.Line(geometry, material);
-                    scene.add(line);
                 }
             });
-            // --- Start Animation ---
             animate();
         }
-        // --- Animation and Interaction Loop ---
         const raycaster = new THREE.Raycaster();
         const mouse = new THREE.Vector2();
         const tooltip = document.getElementById('tooltip');
@@ -226,34 +205,34 @@
         function animate() {
             requestAnimationFrame(animate);
             controls.update();
-            // Raycasting for tooltips
             raycaster.setFromCamera(mouse, camera);
             const intersects = raycaster.intersectObjects(intersectableObjects, true);
-            let hovered = false;
             if (intersects.length > 0) {
                 let obj = intersects[0].object;
-                while(obj.parent && !obj.userData.id) obj = obj.parent; // Find parent group
                 if (obj.userData.id) {
                     tooltip.style.display = 'block';
-                    tooltip.style.left = (event.clientX + 15) + 'px';
-                    tooltip.style.top = (event.clientY + 15) + 'px';
                     tooltip.innerHTML = `<b>Type:</b> ${obj.userData.type}<br><b>Name:</b> ${obj.userData.id}`;
-                    hovered = true;
                 }
             }
-            if(!hovered) tooltip.style.display = 'none';
             renderer.render(scene, camera);
             labelRenderer.render(scene, camera);
         }
-        function onMouseMove(event) {
             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
             mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
-        }
-        window.addEventListener('mousemove', onMouseMove, false);
         window.addEventListener('resize', () => {
             if(camera) {
                 camera.aspect = window.innerWidth / window.innerHeight;
@@ -261,14 +240,14 @@
                 renderer.setSize(window.innerWidth, window.innerHeight);
                 labelRenderer.setSize(window.innerWidth, window.innerHeight);
             }
-        }, false);
-        // --- Run Everything ---
         init().catch(error => {
-            console.error("Failed to initialize visualizer:", error);
-            document.getElementById('loader').innerText = 'Error: Could not load 3D models. See console for details.';
         });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Terraform 3D Icon Visualizer</title>
     <style>
+        body { margin: 0; background-color: #0d1117; color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; overflow: hidden; }
         canvas { display: block; }
+        #loader-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 200; backdrop-filter: blur(5px); background-color: rgba(13, 17, 23, 0.5);}
+        #loader-content { text-align: center; padding: 2em; background-color: #161b22; border-radius: 10px; border: 1px solid #30363d; }
+        #loader-content p { font-size: 1.5em; color: #c9d1d9; margin-top: 0; }
+        #loader-content span { font-size: 1em; color: #8b949e; max-width: 500px; display: inline-block; }
+        #info { position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; color: #c9d1d9; font-size: 1.2em; pointer-events: none; }
+        #tooltip { position: absolute; display: none; padding: 10px; background-color: rgba(22, 27, 34, 0.9); border: 1px solid #30363d; border-radius: 5px; pointer-events: none; backdrop-filter: blur(5px); }
     </style>
 </head>
 <body>
+    <!-- This container provides status updates and error messages -->
+    <div id="loader-container">
+        <div id="loader-content">
+            <p>Loading Visualizer...</p>
+            <span id="loader-message">Initializing 3D scene...</span>
+        </div>
+    </div>
     <div id="info">Terraform Azure 3D Visualizer</div>
     <div id="tooltip"></div>
+    <!-- Importmap for Three.js modules -->
     <script type="importmap">
         {
             "imports": {
         }
     </script>
+    <!-- Main JavaScript Module -->
     <script type="module">
+        // BUILT-IN CHECK: This is the critical fix.
+        if (window.location.protocol === 'file:') {
+            const loaderContent = document.getElementById('loader-content');
+            loaderContent.innerHTML = `
+                <p style="color: #f85149;">Error: Cannot Run From File</p>
+                <span style="max-width: 500px; display: inline-block;">
+                    You must open this HTML file using a local web server due to browser security rules (CORS).
+                    <br><br>
+                    <strong>The easiest way is with the 'Live Server' extension in VS Code.</strong>
+                </span>
+            `;
+            throw new Error("Execution stopped: This file must be served over HTTP/HTTPS, not from a file: URL.");
+        }
         import * as THREE from 'three';
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
         import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
         import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
+        // The Terraform HCL code to visualize
         const terraformCode = `
             resource "azurerm_resource_group" "tfexample" { name = "my-terraform-rg" }
             resource "azurerm_virtual_network" "tfexample" { resource_group_name = azurerm_resource_group.tfexample.name }
             resource "azurerm_linux_virtual_machine_scale_set" "tfexample" { subnet_id = azurerm_subnet.tfexample.id }
         `;
+        // Simple HCL parser for resources and their direct dependencies
         function parseTerraform(code) {
             const resources = [], dependencies = new Set(), regex = /resource "([\w_]+)" "([\w_]+)"/g;
             let match;
             return { nodes: resources, edges: Array.from(dependencies).map(d => JSON.parse(d)) };
         }
+        // Mapping resource types to their official Azure SVG icons
         const iconMap = {
             "azurerm_resource_group": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/resourcegroup.svg",
             "azurerm_virtual_network": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/virtualnetwork.svg",
             "default": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/resource.svg"
         };
         let camera, scene, renderer, labelRenderer, controls;
+        const nodes = {};
+        const intersectableObjects = [];
+        // Function to create a visual node (3D or 2D sprite), returns a Promise
         function createNodeVisual(node, position) {
             return new Promise((resolve, reject) => {
                 const is3D = node.type === 'azurerm_resource_group' || node.type === 'azurerm_virtual_network';
+                const iconUrl = iconMap[node.type] || iconMap.default;
                 if (is3D) {
+                    new SVGLoader().load(iconUrl, (data) => {
                         const iconGroup = new THREE.Group();
                         const extrudeSettings = { depth: 0.8, bevelEnabled: true, bevelThickness: 0.2, bevelSize: 0.1, bevelSegments: 2 };
                         data.paths.forEach(path => {
                             const material = new THREE.MeshStandardMaterial({ color: path.color, metalness: 0.5, roughness: 0.5 });
+                            SVGLoader.createShapes(path).forEach(shape => {
                                 const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+                                geometry.center();
+                                iconGroup.add(new THREE.Mesh(geometry, material));
                             });
                         });
                         const box = new THREE.Box3().setFromObject(iconGroup);
+                        iconGroup.scale.multiplyScalar(5 / box.getSize(new THREE.Vector3()).length());
                         iconGroup.position.copy(position);
                         resolve(iconGroup);
+                    }, undefined, (error) => reject(`SVG Load Error for ${node.id}: ${error}`));
                 } else {
+                    new THREE.TextureLoader().load(iconUrl, (map) => {
+                        const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map }));
                         sprite.scale.set(6, 6, 6);
                         sprite.position.copy(position);
                         resolve(sprite);
+                    }, undefined, (error) => reject(`Texture Load Error for ${node.id}: ${error}`));
                 }
             });
         }
+        // Main function to initialize the scene and run the visualizer
         async function init() {
+            const loaderMessage = document.getElementById('loader-message');
+            // Setup basic Three.js scene
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x0d1117);
             camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
             dirLight.position.set(8, 15, 10);
             scene.add(dirLight);
+            // Parse Terraform and create node creation promises
             const graph = parseTerraform(terraformCode);
+            loaderMessage.innerText = `Found ${graph.nodes.length} resources. Loading models...`;
             const nodePromises = graph.nodes.map((node, index) => {
                 const angle = (index / graph.nodes.length) * Math.PI * 2;
                 const position = new THREE.Vector3(30 * Math.cos(angle), (Math.random() - 0.5) * 15, 30 * Math.sin(angle));
                 return createNodeVisual(node, position);
             });
+            // Wait for all models to load before proceeding
             const loadedNodes = await Promise.all(nodePromises);
+            document.getElementById('loader-container').style.display = 'none';
+            // Add loaded nodes to the scene
             loadedNodes.forEach((visualNode, index) => {
                 const nodeInfo = graph.nodes[index];
                 visualNode.userData = { id: nodeInfo.id, type: nodeInfo.type };
                 nodes[nodeInfo.id] = visualNode;
                 intersectableObjects.push(visualNode);
                 scene.add(visualNode);
                 const labelDiv = document.createElement('div');
                 labelDiv.textContent = nodeInfo.id;
                 labelDiv.style.color = '#c9d1d9';
                 labelDiv.style.fontSize = '12px';
                 labelDiv.style.marginTop = '-1em';
                 const label = new CSS2DObject(labelDiv);
+                label.position.set(0, -5, 0);
                 visualNode.add(label);
             });
+            // Draw dependency lines now that nodes have positions
             graph.edges.forEach(edge => {
                 const startNode = nodes[edge.from];
                 const endNode = nodes[edge.to];
                 if (startNode && endNode) {
                     const geometry = new THREE.BufferGeometry().setFromPoints([startNode.position, endNode.position]);
+                    scene.add(new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x3081f8, transparent: true, opacity: 0.7 })));
                 }
             });
+            // Start the animation loop
             animate();
         }
         const raycaster = new THREE.Raycaster();
         const mouse = new THREE.Vector2();
         const tooltip = document.getElementById('tooltip');
         function animate() {
             requestAnimationFrame(animate);
             controls.update();
+            // Handle hover/tooltip logic
             raycaster.setFromCamera(mouse, camera);
             const intersects = raycaster.intersectObjects(intersectableObjects, true);
             if (intersects.length > 0) {
                 let obj = intersects[0].object;
+                while(obj.parent && !obj.userData.id) obj = obj.parent;
                 if (obj.userData.id) {
                     tooltip.style.display = 'block';
                     tooltip.innerHTML = `<b>Type:</b> ${obj.userData.type}<br><b>Name:</b> ${obj.userData.id}`;
                 }
+            } else {
+                tooltip.style.display = 'none';
             }
             renderer.render(scene, camera);
             labelRenderer.render(scene, camera);
         }
+        window.addEventListener('mousemove', (event) => {
             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
             mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
+            if (tooltip.style.display === 'block') {
+                 tooltip.style.left = `${event.clientX + 15}px`;
+                 tooltip.style.top = `${event.clientY}px`;
+            }
+        });
         window.addEventListener('resize', () => {
             if(camera) {
                 camera.aspect = window.innerWidth / window.innerHeight;
                 renderer.setSize(window.innerWidth, window.innerHeight);
                 labelRenderer.setSize(window.innerWidth, window.innerHeight);
             }
+        });
+        // Run the main initialization function
         init().catch(error => {
+            console.error("Visualizer initialization failed:", error);
+            const loaderContent = document.getElementById('loader-content');
+            loaderContent.innerHTML = `<p style="color: #f85149;">A critical error occurred.</p><span>Check the browser's developer console (F12) for details.</span>`;
         });
     </script>
 </body>
 </html>