Spaces:
Running
Running
File size: 3,214 Bytes
78ef995 f8acd7a d1285e8 f8acd7a d1285e8 f8acd7a d1285e8 f8acd7a 78ef995 f8acd7a |
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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
<!DOCTYPE html>
<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>
|