Spaces:
Running
Running
File size: 2,398 Bytes
78ef995 f8acd7a 6e8ecd2 f8acd7a 6e8ecd2 f8acd7a 6e8ecd2 f8acd7a 6e8ecd2 f8acd7a d1285e8 6e8ecd2 d1285e8 6e8ecd2 f8acd7a 78ef995 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html>
<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>
|