| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Recursive Polygons in 3D</title> | |
| <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> | |
| <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script> | |
| <style> | |
| #canvas { | |
| height: 500px; | |
| width: 800px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a-scene> | |
| <a-entity environment="preset: forest"></a-entity> | |
| <!-- Recursive Polygon Component --> | |
| <a-entity recursive-polygon=" | |
| vertices: 6; // Number of vertices | |
| scale: 2; // Scale factor | |
| level: 5; // Recursive level | |
| color: #FFC65D; // Polygon color | |
| height: 0.5; // Polygon height | |
| x: 0; // X-position | |
| y: 0; // Y-position | |
| z: -5 // Z-position | |
| "></a-entity> | |
| <!-- Math Function --> | |
| <a-entity math-function=" | |
| func: sin(x^2+y^2)/sqrt(x^2+y^2); // Math function to evaluate | |
| xmin: -5; xmax: 5; // Range of x-values | |
| ymin: -5; ymax: 5; // Range of y-values | |
| xstep: 0.2; ystep: 0.2; // Step size for x and y | |
| scale: 0.5; // Scale factor | |
| color: #8CEEEF; // Function color | |
| height: 0.1; // Function height | |
| z: -5 // Z-position | |
| "></a-entity> | |
| <a-entity camera position="0 1.6 0" look-controls wasd-controls></a-entity> | |
| </a-scene> | |
| </body> | |
| </html> |