Update index.html
Browse files- index.html +44 -17
index.html
CHANGED
@@ -1,19 +1,46 @@
|
|
1 |
-
|
2 |
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
19 |
</html>
|
|
|
1 |
+
<<!DOCTYPE html>
|
2 |
<html>
|
3 |
+
<head>
|
4 |
+
<meta charset="utf-8">
|
5 |
+
<title>Recursive Polygons in 3D</title>
|
6 |
+
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
|
7 |
+
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
|
8 |
+
<style>
|
9 |
+
#canvas {
|
10 |
+
height: 500px;
|
11 |
+
width: 800px;
|
12 |
+
}
|
13 |
+
</style>
|
14 |
+
</head>
|
15 |
+
<body>
|
16 |
+
<a-scene>
|
17 |
+
<a-entity environment="preset: forest"></a-entity>
|
18 |
+
|
19 |
+
<!-- Recursive Polygon Component -->
|
20 |
+
<a-entity recursive-polygon="
|
21 |
+
vertices: 6; // Number of vertices
|
22 |
+
scale: 2; // Scale factor
|
23 |
+
level: 5; // Recursive level
|
24 |
+
color: #FFC65D; // Polygon color
|
25 |
+
height: 0.5; // Polygon height
|
26 |
+
x: 0; // X-position
|
27 |
+
y: 0; // Y-position
|
28 |
+
z: -5 // Z-position
|
29 |
+
"></a-entity>
|
30 |
+
|
31 |
+
<!-- Math Function -->
|
32 |
+
<a-entity math-function="
|
33 |
+
func: sin(x^2+y^2)/sqrt(x^2+y^2); // Math function to evaluate
|
34 |
+
xmin: -5; xmax: 5; // Range of x-values
|
35 |
+
ymin: -5; ymax: 5; // Range of y-values
|
36 |
+
xstep: 0.2; ystep: 0.2; // Step size for x and y
|
37 |
+
scale: 0.5; // Scale factor
|
38 |
+
color: #8CEEEF; // Function color
|
39 |
+
height: 0.1; // Function height
|
40 |
+
z: -5 // Z-position
|
41 |
+
"></a-entity>
|
42 |
+
|
43 |
+
<a-entity camera position="0 1.6 0" look-controls wasd-controls></a-entity>
|
44 |
+
</a-scene>
|
45 |
+
</body>
|
46 |
</html>
|