awacke1/HTML5-DNA-Sequence
2
1<!DOCTYPE html>2<html>3<head>4 <meta charset="utf-8">5 <title>Babylon.js L-system Fractal Example</title>6 <script src="https://cdn.babylonjs.com/babylon.js"></script>7 <style>8 canvas { width: 100%; height: 100%; touch-action: none; }9 </style>10</head>11<body>12 <canvas id="renderCanvas"></canvas>13 <script>14 const canvas = document.getElementById('renderCanvas');15 const engine = new BABYLON.Engine(canvas, true);16 const createScene = () => {17 const scene = new BABYLON.Scene(engine);18 const camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);19 const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);20 const texture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png", scene);21 const bumpMap = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor_n.jpg", scene);22 const rules = {F: "F+F-F-F+F"};23 const axiom = "F-F-F-F";24 const angle = Math.PI / 2, length = 1, iterations = 3;25 let lSystemString = axiom, position = BABYLON.Vector3.Zero(), direction = BABYLON.Vector3.Forward();26 for (let i = 0; i < iterations; i++) {27 let newString = "";28 for (let j = 0; j < lSystemString.length; j++) {29 const char = lSystemString.charAt(j);30 newString += rules[char] || char;31 }32 lSystemString = newString;33 }34 for (let i = 0; i < lSystemString.length; i++) {35 const char = lSystemString.charAt(i);36 if (char === "F") {37 const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: length, segments: 16 }, scene);38 sphere.position = position.clone();39 sphere.material = new BABYLON.StandardMaterial("texture", scene);40 sphere.material.diffuseTexture = texture;41 sphere.material.bumpTexture = bumpMap;42 const textureAnimation = new BABYLON.Animation("textureAnimation", "material.diffuseTexture.uOffset", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE, true);43 textureAnimation.setKeys([{ frame: 0, value: 0 }, { frame: 100, value: 1 }]);44 sphere.material.diffuseTexture.wrapU = sphere.material.diffuseTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;45 sphere.material.diffuseTexture.uScale = sphere.material.diffuseTexture.vScale = 10;46 sphere.animations.push(textureAnimation);47 scene.beginAnimation(sphere, 0, 100, true);48 const animation = new BABYLON.Animation("myAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE, true);49 animation.setKeys([{ frame: 0, value: position.clone() }, { frame: 100, value: position.addInPlace(direction.scale(length)).clone() }]);50 sphere.animations.push(animation);51 scene.beginAnimation(sphere, 0, 100, true);52 } else if (char === "+") {53 direction.rotateByQuaternionToRef(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), -angle), direction);54} else if (char === "-") {55direction.rotateByQuaternionToRef(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), angle), direction);56}57}58return scene;59};60const scene = createScene();61engine.runRenderLoop(() => scene.render());62window.addEventListener('resize', () => engine.resize());63</script>64 65</body>66</html>67