kirchdub/3.HTML5-Aframe-3dMap-Flight
0
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 vertices22 scale: 2; // Scale factor23 level: 5; // Recursive level24 color: #FFC65D; // Polygon color25 height: 0.5; // Polygon height26 x: 0; // X-position27 y: 0; // Y-position28 z: -5 // Z-position29 "></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 evaluate34 xmin: -5; xmax: 5; // Range of x-values35 ymin: -5; ymax: 5; // Range of y-values36 xstep: 0.2; ystep: 0.2; // Step size for x and y37 scale: 0.5; // Scale factor38 color: #8CEEEF; // Function color39 height: 0.1; // Function height40 z: -5 // Z-position41 "></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>