Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>DNA Fractal Demo</title> | |
| <script src="https://cdn.babylonjs.com/babylon.js"></script> | |
| <style> | |
| html, | |
| body { | |
| overflow: hidden; | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #renderCanvas { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="renderCanvas"></canvas> | |
| <script> | |
| // Create the BabylonJS engine | |
| const canvas = document.getElementById("renderCanvas"); | |
| const engine = new BABYLON.Engine(canvas, true); | |
| // Create a new scene | |
| const scene = new BABYLON.Scene(engine); | |
| // Create a camera | |
| const camera = new BABYLON.ArcRotateCamera( | |
| "Camera", | |
| 0, | |
| 0, | |
| 10, | |
| new BABYLON.Vector3(0, 0, 0), | |
| scene | |
| ); | |
| // Attach the camera to the canvas | |
| camera.attachControl(canvas, true); | |
| // Create a DNA fractal | |
| const DNAFractal = BABYLON.MeshBuilder.CreateTube( | |
| "DNAFractal", | |
| { | |
| path: [ | |
| new BABYLON.Vector3(0, 0, 0), | |
| new BABYLON.Vector3(0, 1, 0), | |
| new BABYLON.Vector3(0.5, 1.5, 0), | |
| new BABYLON.Vector3(0.5, 2.5, 0), | |
| new BABYLON.Vector3(0, 3, 0), | |
| ], | |
| radius: 0.5, | |
| tessellation: 64, | |
| sideOrientation: BABYLON.Mesh.DOUBLESIDE, | |
| }, | |
| scene | |
| ); | |
| // Add a material to the DNA fractal | |
| const DNAFractalMaterial = new BABYLON.StandardMaterial( | |
| "DNAFractalMaterial", | |
| scene | |
| ); | |
| DNAFractalMaterial.diffuseColor = new BABYLON.Color3(1, 0.5, 0); | |
| DNAFractalMaterial.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1); | |
| DNAFractal.material = DNAFractalMaterial; | |
| // Animate the DNA fractal | |
| let time = 0; | |
| scene.registerAfterRender(function () { | |
| time += 0.01; | |
| const positions = DNAFractal.getVerticesData( | |
| BABYLON.VertexBuffer.PositionKind | |
| ); | |
| const colors = DNAFractal.getVerticesData( | |
| BABYLON.VertexBuffer.ColorKind | |
| ); | |
| for (let i = 0; i < positions.length; i += 3) { | |
| const x = positions[i]; | |
| const y = positions[i + 1]; | |
| const z = positions[i + 2]; | |
| const color = colors[i / 3]; | |
| const scale = 0.5 + 0.5 * Math.sin(time + y * 10); | |
| const rotation = Math.PI * 2 * Math.sin(time + x * 10); | |
| positions[i] = x * scale; | |
| positions[i + 1] = y * scale * Math.cos(rotation); | |
| positions[i + 2] = y * scale * Math.sin(rotation); | |
| colors[i / 3] = new BABYLON.Color4( | |
| color.r, | |
| color.g, | |
| color.b,1); | |
| } | |
| DNAFractal.updateVerticesData( | |
| BABYLON.VertexBuffer.PositionKind, | |
| positions | |
| ); | |
| DNAFractal.updateVerticesData(BABYLON.VertexBuffer.ColorKind, colors); | |
| }); | |
| // Render the scene | |
| engine.runRenderLoop(function () { | |
| scene.render(); | |
| }); | |
| // Resize the canvas when the window is resized | |
| window.addEventListener("resize", function () { | |
| engine.resize(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |