Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>DNA Fractal</title> | |
| <style> | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| canvas { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="renderCanvas"></canvas> | |
| <script src="https://cdn.babylonjs.com/babylon.js"></script> | |
| <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> | |
| <script> | |
| window.addEventListener('DOMContentLoaded', () => { | |
| // Get the canvas element and create the Babylon scene | |
| const canvas = document.getElementById('renderCanvas'); | |
| const engine = new BABYLON.Engine(canvas, true); | |
| const scene = new BABYLON.Scene(engine); | |
| // Set up the camera | |
| const camera = new BABYLON.ArcRotateCamera('Camera', 0, 0, 10, BABYLON.Vector3.Zero(), scene); | |
| camera.attachControl(canvas, true); | |
| // Create the DNA fractal shape | |
| const shape = BABYLON.MeshBuilder.CreateBox('Shape', {size: 1}, scene); | |
| shape.scaling = new BABYLON.Vector3(0.5, 1, 0.5); | |
| shape.rotation = new BABYLON.Vector3(Math.PI / 4, 0, 0); | |
| // Create the fractal by cloning and rotating the shape | |
| const numLevels = 5; | |
| const angle = Math.PI / 4; | |
| const scale = 0.5; | |
| const fractal = new BABYLON.Mesh('Fractal', scene); | |
| fractal.addChild(shape); | |
| for (let i = 0; i < numLevels; i++) { | |
| const child = shape.clone(`Level ${i}`); | |
| child.scaling = child.scaling.scale(scale); | |
| child.rotation = child.rotation.add(new BABYLON.Vector3(0, angle, 0)); | |
| fractal.addChild(child); | |
| shape = child; | |
| } | |
| // Apply the DNA texture to the fractal | |
| const dnaTexture = new BABYLON.Texture('https://i.imgur.com/f5GcE7Y.jpg', scene); | |
| const material = new BABYLON.StandardMaterial('Material', scene); | |
| material.diffuseTexture = dnaTexture; | |
| fractal.material = material; | |
| // Start the Babylon engine and render the scene | |
| engine.runRenderLoop(() => { | |
| scene.render(); | |
| }); | |
| // Handle window resizing | |
| window.addEventListener('resize', () => { | |
| engine.resize(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |