awacke1/HTML5-DNA-Sequence
2
1<!DOCTYPE html>2<html>3<head>4 <title>DNA Sequence</title>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <script src="https://cdn.babylonjs.com/babylon.js"></script>8 <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>9</head>10<body>11 <canvas id="renderCanvas"></canvas>12 <script>13 var canvas = document.getElementById("renderCanvas");14 var engine = new BABYLON.Engine(canvas, true);15 16 var createScene = function () {17 var scene = new BABYLON.Scene(engine);18 var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);19 camera.attachControl(canvas, true);20 21 // Create a DNA strand22 var dnaStrand = BABYLON.MeshBuilder.CreateTube("dnaStrand", {23 path: [24 new BABYLON.Vector3(0, 0, 0),25 new BABYLON.Vector3(0, 2, 0),26 new BABYLON.Vector3(2, 2, 0),27 new BABYLON.Vector3(2, 0, 0),28 new BABYLON.Vector3(2, -2, 0),29 new BABYLON.Vector3(0, -2, 0),30 new BABYLON.Vector3(0, 0, 0)31 ],32 radiusFunction: function(i) {33 return 0.1 + Math.abs(2 * Math.sin(i * 10));34 },35 tessellation: 128,36 updatable: true37 }, scene);38 39 // Create the material for the DNA strand40 var dnaMaterial = new BABYLON.StandardMaterial("dnaMaterial", scene);41 dnaMaterial.emissiveColor = new BABYLON.Color3(0.1, 0.1, 0.1);42 dnaMaterial.specularColor = new BABYLON.Color3(0.2, 0.2, 0.2);43 44 // Apply the material to the DNA strand45 dnaStrand.material = dnaMaterial;46 47 // Add some lights to the scene48 var light1 = new BABYLON.PointLight("light1", new BABYLON.Vector3(5, 10, 5), scene);49 var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(-5, -10, -5), scene);50 51 return scene;52 }53 54 var scene = createScene();55 56 engine.runRenderLoop(function () {57 scene.render();58 });59 60 window.addEventListener("resize", function () {61 engine.resize();62 });63 </script>64</body>65</html>66