Rock example

jasonsturges · Nov 4, 2024 · b410b4a · b410b4a
1 parent f501fda
commit b410b4a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -55,6 +55,7 @@ <h2>Models</h2>
           <header>Rocks</header>
           <ul>
             <li><a href="/three-low-poly/models/mossy-rocks">Mossy Rocks</a></li>
+            <li><a href="/three-low-poly/models/rock">Rock</a></li>
             <li><a href="/three-low-poly/models/rocks">Rocks</a></li>
           </ul>
         </div>

diff --git a/examples/models/rock.html b/examples/models/rock.html
@@ -0,0 +1,47 @@
+<!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 * as THREE from "three";
+      import GUI from "lil-gui";
+      import { createOrbitScene } from "../utils/orbitScene.js";
+      import { Rock } from "../../src/index.js";
+
+      const { scene } = createOrbitScene();
+
+      let rock = new Rock();
+      scene.add(rock);
+
+      const gui = new GUI();
+      const parameters = {
+        radius: 1,
+        widthSegments: 4,
+        heightSegments: 4,
+      };
+
+      gui.title("Rock");
+      gui.add(parameters, "radius", 0.5, 2).step(0.1).onChange(update);
+      gui.add(parameters, "widthSegments", 2, 8).step(1).onChange(update);
+      gui.add(parameters, "heightSegments", 2, 8).step(1).onChange(update);
+
+      function update() {
+        scene.remove(rock);
+        rock = new Rock(parameters.radius, parameters.widthSegments, parameters.heightSegments);
+        scene.add(rock);
+      }
+    </script>
+  </body>
+</html>