Tree example

jasonsturges · Nov 3, 2024 · a88c4ef · a88c4ef
1 parent 88324bb
commit a88c4ef
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 0 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -96,6 +96,13 @@ <h2>Models</h2>
             <li><a href="/three-low-poly/models/bone">Bone</a></li>
           </ul>
         </div>
+
+        <div>
+          <header>Trees</header>
+          <ul>
+            <li><a href="/three-low-poly/models/tree">Tree</a></li>
+          </ul>
+        </div>
       </section>
 
       <section class="grid-item">

diff --git a/examples/models/tree.html b/examples/models/tree.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Three Low Poly</title>
+    <style>
+      body {
+        margin: 0;
+      }
+      canvas {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <script type="module">
+      import { GUI } from "lil-gui";
+      import { Tree } from "../../src/index.js";
+      import { createOrbitScene } from "../utils/orbitScene.js";
+
+      const { scene } = createOrbitScene();
+
+      const gui = new GUI();
+      const parameters = {
+        trunkRadiusTop: 0.25,
+        trunkRadiusBottom: 0.4,
+        trunkHeight: 2.5,
+        trunkSegments: 14,
+        trunkColor: 0x8b4513,
+        leafSize: 0.8,
+        leafCount: 6,
+        leafDetail: 0,
+        leafSpreadRadius: 1.5,
+        leafColor: 0x228b22,
+      };
+
+      gui.title("Tree");
+      gui.add(parameters, "trunkRadiusTop", 0.05, 0.5).step(0.1).onChange(updateGeometry);
+      gui.add(parameters, "trunkRadiusBottom", 0.05, 0.5).step(0.1).onChange(updateGeometry);
+      gui.add(parameters, "trunkHeight", 1, 5).step(0.1).onChange(updateGeometry);
+      gui.add(parameters, "trunkSegments", 3, 32).step(1).onChange(updateGeometry);
+      gui.addColor(parameters, "trunkColor").name("Trunk Color").onChange(updateGeometry);
+      gui.add(parameters, "leafSize", 0.5, 2).step(0.1).onChange(updateGeometry);
+      gui.add(parameters, "leafCount", 1, 16).step(1).onChange(updateGeometry);
+      gui.add(parameters, "leafDetail", 0, 8).step(1).onChange(updateGeometry);
+      gui.add(parameters, "leafSpreadRadius", 0.5, 2).step(0.1).onChange(updateGeometry);
+      gui.addColor(parameters, "leafColor").name("Leaf Color").onChange(updateGeometry);
+
+      let tree;
+
+      function updateGeometry() {
+        scene.remove(tree);
+
+        tree = new Tree({
+          trunkRadiusTop: parameters.trunkRadiusTop,
+          trunkRadiusBottom: parameters.trunkRadiusBottom,
+          trunkHeight: parameters.trunkHeight,
+          trunkSegments: parameters.trunkSegments,
+          trunkColor: parameters.trunkColor,
+          leafSize: parameters.leafSize,
+          leafCount: parameters.leafCount,
+          leafDetail: parameters.leafDetail,
+          leafSpreadRadius: parameters.leafSpreadRadius,
+          leafColor: parameters.leafColor,
+        });
+        tree.position.y = -2;
+        scene.add(tree);
+      }
+      updateGeometry();
+    </script>
+  </body>
+</html>