Commit
•
89048d3
1
Parent(s):
e984ae0
Update index.html
Browse files- index.html +108 -17
index.html
CHANGED
@@ -1,19 +1,110 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
+
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
|
8 |
+
<style>
|
9 |
+
canvas {
|
10 |
+
width: 100%;
|
11 |
+
height: 100%;
|
12 |
+
touch-action: none;
|
13 |
+
}
|
14 |
+
</style>
|
15 |
+
</head>
|
16 |
+
<body>
|
17 |
+
<canvas id="renderCanvas"></canvas>
|
18 |
+
<script>
|
19 |
+
window.addEventListener('DOMContentLoaded', function () {
|
20 |
+
var canvas = document.getElementById('renderCanvas');
|
21 |
+
var engine = new BABYLON.Engine(canvas, true);
|
22 |
+
var createScene = function () {
|
23 |
+
var scene = new BABYLON.Scene(engine);
|
24 |
+
// Create a camera
|
25 |
+
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
|
26 |
+
// Create a light
|
27 |
+
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
|
28 |
+
// Create an array to hold the spheres
|
29 |
+
var spheres = [];
|
30 |
+
// Load the texture and bump map
|
31 |
+
var texture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png", scene);
|
32 |
+
var bumpMap = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor_n.jpg", scene);
|
33 |
+
// Define the L-system rules and starting axiom
|
34 |
+
var rules = {
|
35 |
+
F: "F+F-F-F+F"
|
36 |
+
};
|
37 |
+
var axiom = "F-F-F-F";
|
38 |
+
var angle = Math.PI / 2;
|
39 |
+
var length = 1;
|
40 |
+
var iterations = 3;
|
41 |
+
// Generate the L-system string
|
42 |
+
var lSystemString = axiom;
|
43 |
+
for (var i = 0; i < iterations; i++) {
|
44 |
+
var newString = "";
|
45 |
+
for (var j = 0; j < lSystemString.length; j++) {
|
46 |
+
var char = lSystemString.charAt(j);
|
47 |
+
if (rules[char]) {
|
48 |
+
newString += rules[char];
|
49 |
+
} else {
|
50 |
+
newString += char;
|
51 |
+
}
|
52 |
+
}
|
53 |
+
lSystemString = newString;
|
54 |
+
}
|
55 |
+
// Create a fountain of spheres that follow the L-system string
|
56 |
+
var position = BABYLON.Vector3.Zero();
|
57 |
+
var direction = BABYLON.Vector3.Forward();
|
58 |
+
for (var i = 0; i < lSystemString.length; i++) {
|
59 |
+
var char = lSystemString.charAt(i);
|
60 |
+
if (char === "F") {
|
61 |
+
// Create a new sphere
|
62 |
+
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: length, segments: 16}, scene);
|
63 |
+
sphere.position = position.clone();
|
64 |
+
sphere.material = new BABYLON.StandardMaterial("texture", scene);
|
65 |
+
sphere.material.diffuseTexture = texture;
|
66 |
+
sphere.material.bumpTexture = bumpMap;
|
67 |
+
spheres.push(sphere);
|
68 |
+
// Animate the texture of the sphere
|
69 |
+
var textureAnimation = new BABYLON.Animation("textureAnimation", "material.diffuseTexture.uOffset", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
|
70 |
+
var keys = [];
|
71 |
+
keys.push({frame: 0, value:0});
|
72 |
+
keys.push({frame: 100, value: 1});
|
73 |
+
textureAnimation.setKeys(keys);
|
74 |
+
sphere.material.diffuseTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
|
75 |
+
sphere.material.diffuseTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;
|
76 |
+
sphere.material.diffuseTexture.uScale = 10;
|
77 |
+
sphere.material.diffuseTexture.vScale = 10;
|
78 |
+
sphere.animations.push(textureAnimation);
|
79 |
+
scene.beginAnimation(sphere, 0, 100, true);
|
80 |
+
// Animate the sphere
|
81 |
+
var animation = new BABYLON.Animation("myAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
|
82 |
+
keys = [];
|
83 |
+
keys.push({frame: 0, value: position.clone()});
|
84 |
+
position.addInPlace(direction.scale(length));
|
85 |
+
keys.push({frame: 100, value: position.clone()});
|
86 |
+
animation.setKeys(keys);
|
87 |
+
sphere.animations.push(animation);
|
88 |
+
scene.beginAnimation(sphere, 0, 100, true);
|
89 |
+
} else if (char === "+") {
|
90 |
+
// Rotate clockwise
|
91 |
+
direction.rotateByQuaternionToRef(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), -angle), direction);
|
92 |
+
} else if (char === "-") {
|
93 |
+
// Rotate counterclockwise
|
94 |
+
direction.rotateByQuaternionToRef(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), angle), direction);
|
95 |
+
}
|
96 |
+
}
|
97 |
+
return scene;
|
98 |
+
}
|
99 |
+
var scene = createScene();
|
100 |
+
engine.runRenderLoop(function () {
|
101 |
+
scene.render();
|
102 |
+
});
|
103 |
+
window.addEventListener('resize', function () {
|
104 |
+
engine.resize();
|
105 |
+
});
|
106 |
+
});
|
107 |
+
</script>
|
108 |
+
|
109 |
+
</body>
|
110 |
+
</html>
|