Example updates

jasonsturges · Nov 30, 2024 · dc1613b · dc1613b
1 parent 452519d
commit dc1613b
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 84 deletions.
diff --git a/examples/models/books/book.html b/examples/models/books/book.html
@@ -17,16 +17,11 @@
   <body>
     <script type="module">
       import GUI from "lil-gui";
-      import { Book, centerObject } from "../../../src/index.js";
+      import { Book, BookGeometry, centerObject } from "../../../src/index.js";
       import { createOrbitScene } from "../../utils/orbitScene.js";
 
       const { scene } = createOrbitScene();
 
-      let book = new Book();
-      scene.add(book);
-      centerObject(book);
-
-      // Create the lil-gui panel
       const gui = new GUI();
       const params = {
         width: 1,
@@ -38,6 +33,10 @@
         pageColor: "#ffffff",
       };
 
+      const book = new Book(params);
+      scene.add(book);
+      centerObject(book);
+
       gui.add(params, "width", 0.1, 5).step(0.001).name("Width").onChange(updateGeometry);
       gui.add(params, "height", 0.1, 5).step(0.001).name("Height").onChange(updateGeometry);
       gui.add(params, "depth", 0.1, 2).step(0.001).name("Depth").onChange(updateGeometry);
@@ -47,18 +46,12 @@
       gui.addColor(params, "pageColor").name("Page Color").onChange(updateGeometry);
 
       function updateGeometry() {
-        scene.remove(book);
-        book = new Book({
-          width: params.width,
-          height: params.height,
-          depth: params.depth,
-          coverThickness: params.coverThickness,
-          pageIndent: params.pageIndent,
-          coverColor: params.coverColor,
-          pageColor: params.pageColor,
-        });
+        book.geometry.dispose();
+
+        book.geometry = new BookGeometry(params.width, params.height, params.depth, params.coverThickness, params.pageIndent);
+        book.material[0].color.set(params.coverColor);
+        book.material[1].color.set(params.pageColor);
         centerObject(book);
-        scene.add(book);
       }
     </script>
   </body>

diff --git a/examples/models/fence/stone-fence-post.html b/examples/models/fence/stone-fence-post.html
@@ -17,29 +17,27 @@
   <body>
     <script type="module">
       import GUI from "lil-gui";
-      import { centerObject, StoneFencePost } from "../../../src/index.js";
+      import { StoneFencePost, StoneFencePostGeometry, centerObject } from "../../../src/index.js";
       import { createOrbitScene } from "../../utils/orbitScene.js";
 
       const { scene } = createOrbitScene();
 
-      // Default parameters
       const params = {
         height: 2.25,
       };
 
-      let fenceColumn = new StoneFencePost(params);
-      scene.add(fenceColumn);
-      centerObject(fenceColumn);
+      const fencePost = new StoneFencePost(params);
+      scene.add(fencePost);
+      centerObject(fencePost);
 
       const gui = new GUI();
 
       gui.add(params, "height", 0.1, 5).name("Height").step(0.1).onChange(update);
 
       function update() {
-        scene.remove(fenceColumn);
-        fenceColumn = new StoneFencePost(params);
-        scene.add(fenceColumn);
-        centerObject(fenceColumn);
+        fencePost.geometry.dispose();
+        fencePost.geometry = new StoneFencePostGeometry(params);
+        centerObject(fencePost);
       }
     </script>
   </body>

diff --git a/examples/models/fence/wrought-iron-bar.html b/examples/models/fence/wrought-iron-bar.html
@@ -17,7 +17,7 @@
     <script type="module">
       import * as THREE from "three";
       import GUI from "lil-gui";
-      import { centerObject, WroughtIronBar } from "../../../src/index.js";
+      import { WroughtIronBar, WroughtIronBarGeometry, centerObject } from "../../../src/index.js";
       import { createOrbitScene } from "../../utils/orbitScene.js";
 
       const { scene } = createOrbitScene();
@@ -33,7 +33,7 @@
         radialSegments: 8,
       };
 
-      let wroughtIronBar = new WroughtIronBar(params);
+      const wroughtIronBar = new WroughtIronBar(params);
       scene.add(wroughtIronBar);
       centerObject(wroughtIronBar);
 
@@ -47,9 +47,8 @@
       gui.add(params, "radialSegments", 3, 64, 1).name("Radial Segments").step(1).onChange(update);
 
       function update() {
-        scene.remove(wroughtIronBar);
-        wroughtIronBar = new WroughtIronBar(params);
-        scene.add(wroughtIronBar);
+        wroughtIronBar.geometry.dispose();
+        wroughtIronBar.geometry = new WroughtIronBarGeometry(params);
         centerObject(wroughtIronBar);
       }
     </script>

diff --git a/examples/models/fence/wrought-iron-fence.html b/examples/models/fence/wrought-iron-fence.html
@@ -18,7 +18,7 @@
     <script type="module">
       import * as THREE from "three";
       import GUI from "lil-gui";
-      import { centerObject, WroughtIronFence } from "../../../src/index.js";
+      import { WroughtIronFence, WroughtIronFenceGeometry, centerObject } from "../../../src/index.js";
       import { createOrbitScene } from "../../utils/orbitScene.js";
 
       const { scene } = createOrbitScene();
@@ -39,7 +39,7 @@
         radialSegments: 8,
       };
 
-      let wroughtIronFence = new WroughtIronFence(params);
+      const wroughtIronFence = new WroughtIronFence(params);
       scene.add(wroughtIronFence);
       centerObject(wroughtIronFence);
 
@@ -58,9 +58,8 @@
       gui.add(params, "radialSegments", 3, 64, 1).name("Radial Segments").step(1).onChange(update);
 
       function update() {
-        scene.remove(wroughtIronFence);
-        wroughtIronFence = new WroughtIronFence(params);
-        scene.add(wroughtIronFence);
+        wroughtIronFence.geometry.dispose();
+        wroughtIronFence.geometry = new WroughtIronFenceGeometry(params);
         centerObject(wroughtIronFence);
       }
     </script>

diff --git a/examples/models/furniture/bookshelf.html b/examples/models/furniture/bookshelf.html
@@ -16,7 +16,7 @@
   <body>
     <script type="module">
       import GUI from "lil-gui";
-      import { Bookshelf, centerObject } from "../../../src/index.js";
+      import { Bookshelf, BookshelfGeometry, centerObject } from "../../../src/index.js";
       import { createOrbitScene } from "../../utils/orbitScene.js";
 
       const { scene, camera } = createOrbitScene();
@@ -32,7 +32,7 @@
         open: false,
       };
 
-      let bookshelf = new Bookshelf(params);
+      const bookshelf = new Bookshelf(params);
       scene.add(bookshelf);
       centerObject(bookshelf);
 
@@ -46,9 +46,8 @@
       gui.add(params, "open").name("Open").onChange(update);
 
       function update() {
-        scene.remove(bookshelf);
-        bookshelf = new Bookshelf(params);
-        scene.add(bookshelf);
+        bookshelf.geometry.dispose();
+        bookshelf.geometry = new BookshelfGeometry(params);
         centerObject(bookshelf);
       }
     </script>

diff --git a/examples/models/rocks/rock.html b/examples/models/rocks/rock.html
@@ -16,29 +16,29 @@
   <body>
     <script type="module">
       import GUI from "lil-gui";
-      import { Rock } from "../../../src/index.js";
+      import { Rock, RockGeometry } from "../../../src/index.js";
       import { createOrbitScene } from "../../utils/orbitScene.js";
 
       const { scene } = createOrbitScene();
 
-      let rock = new Rock();
-      scene.add(rock);
-
-      const gui = new GUI();
       const parameters = {
         radius: 1,
         widthSegments: 4,
         heightSegments: 4,
       };
 
+      let rock = new Rock(parameters.radius, parameters.widthSegments, parameters.heightSegments);
+      scene.add(rock);
+
+      const gui = new GUI();
       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);
+      gui.add(parameters, "radius", 0.25, 2, 0.01).onChange(update);
+      gui.add(parameters, "widthSegments", 2, 8, 1).onChange(update);
+      gui.add(parameters, "heightSegments", 2, 8, 1).onChange(update);
 
       function update() {
-        scene.remove(rock);
-        rock = new Rock(parameters.radius, parameters.widthSegments, parameters.heightSegments);
+        rock.geometry.dispose();
+        rock.geometry = new RockGeometry(parameters.radius, parameters.widthSegments, parameters.heightSegments);
         scene.add(rock);
       }
     </script>

diff --git a/examples/models/science/erlenmeyer-flask.html b/examples/models/science/erlenmeyer-flask.html
@@ -16,7 +16,7 @@
   <body>
     <script type="module">
       import GUI from "lil-gui";
-      import { centerObject, ErlenmeyerFlask } from "../../../src/index.js";
+      import { ErlenmeyerFlask, ErlenmeyerFlaskGeometry, centerObject } from "../../../src/index.js";
       import { createOrbitScene } from "../../utils/orbitScene.js";
 
       const { scene } = createOrbitScene();
@@ -42,9 +42,8 @@
       gui.add(params, "radialSegments", 3, 64).name("Radial Segments").step(1).onChange(update);
 
       function update() {
-        scene.remove(flask);
-        flask = new ErlenmeyerFlask(params);
-        scene.add(flask);
+        flask.geometry.dispose();
+        flask.geometry = new ErlenmeyerFlaskGeometry(params);
         centerObject(flask);
       }
     </script>

diff --git a/examples/models/science/panel.html b/examples/models/science/panel.html
@@ -21,8 +21,6 @@
 
       const { scene } = createOrbitScene();
 
-      const gui = new GUI();
-
       const params = {
         width: 3,
         height: 4,
@@ -33,6 +31,7 @@
       scene.add(panel);
       centerObject(panel);
 
+      const gui = new GUI();
       gui.add(params, "width", 0, 5, 0.001).name("Width").onChange(update);
       gui.add(params, "height", 0, 5, 0.001).name("Height").onChange(update);
       gui.add(params, "depth", 0, 2, 0.001).name("Depth").onChange(update);
@@ -41,7 +40,7 @@
         scene.remove(panel);
         panel = new Panel(params);
         scene.add(panel);
-        centerObject(panel);
+        centerMesh(panel);
       }
     </script>
   </body>

diff --git a/examples/models/science/stand.html b/examples/models/science/stand.html
@@ -16,7 +16,7 @@
   <body>
     <script type="module">
       import GUI from "lil-gui";
-      import { centerObject, Stand } from "../../../src/index.js";
+      import { Stand, StandGeometry, centerObject } from "../../../src/index.js";
       import { createOrbitScene } from "../../utils/orbitScene.js";
 
       const { scene } = createOrbitScene();
@@ -29,7 +29,7 @@
         radialSegments: 16,
       };
 
-      let stand = new Stand(params);
+      const stand = new Stand(params);
       scene.add(stand);
       centerObject(stand);
 
@@ -42,9 +42,8 @@
       gui.add(params, "radialSegments", 3, 64).name("Radial Segments").step(1).onChange(update);
 
       function update() {
-        scene.remove(stand);
-        stand = new Stand(params);
-        scene.add(stand);
+        stand.geometry.dispose();
+        stand.geometry = new StandGeometry(params);
         centerObject(stand);
       }
     </script>

diff --git a/examples/models/science/test-tube.html b/examples/models/science/test-tube.html
@@ -16,32 +16,35 @@
   <body>
     <script type="module">
       import GUI from "lil-gui";
-      import { TestTube } from "../../../src/index.js";
+      import { TestTube, TestTubeGeometry } from "../../../src/index.js";
       import { createOrbitScene } from "../../utils/orbitScene.js";
 
       const { scene } = createOrbitScene();
 
-      let testTube = new TestTube();
-      scene.add(testTube);
-
-      const gui = new GUI();
-      const geometryFolder = gui.addFolder("Geometry");
       const parameters = {
         radiusTop: 0.2,
         radiusBottom: 0.2,
         height: 3,
         segments: 32,
       };
 
-      geometryFolder.add(parameters, "radiusTop", 0.05, 0.5).onChange(updateGeometry);
-      geometryFolder.add(parameters, "radiusBottom", 0.05, 0.5).onChange(updateGeometry);
-      geometryFolder.add(parameters, "height", 0.2, 3.0).onChange(updateGeometry);
-      geometryFolder.add(parameters, "segments", 3, 32).step(1).onChange(updateGeometry);
-      geometryFolder.open();
+      let testTube = new TestTube(parameters.radiusTop, parameters.radiusBottom, parameters.height, parameters.segments);
+      scene.add(testTube);
+
+      const gui = new GUI();
+      gui.add(parameters, "radiusTop", 0.05, 0.5).onChange(updateGeometry);
+      gui.add(parameters, "radiusBottom", 0.05, 0.5).onChange(updateGeometry);
+      gui.add(parameters, "height", 0.2, 3.0).onChange(updateGeometry);
+      gui.add(parameters, "segments", 3, 32).step(1).onChange(updateGeometry);
 
       function updateGeometry() {
-        scene.remove(testTube);
-        testTube = new TestTube(parameters.radiusTop, parameters.radiusBottom, parameters.height, parameters.segments);
+        testTube.geometry.dispose();
+        testTube.geometry = new TestTubeGeometry(
+          parameters.radiusTop,
+          parameters.radiusBottom,
+          parameters.height,
+          parameters.segments,
+        );
         scene.add(testTube);
       }
     </script>

diff --git a/examples/models/terrain/hill.html b/examples/models/terrain/hill.html
@@ -17,7 +17,7 @@
   <body>
     <script type="module">
       import GUI from "lil-gui";
-      import { Hill } from "../../../src/index.js";
+      import { Hill, HillGeometry } from "../../../src/index.js";
       import { createOrbitScene } from "../../utils/orbitScene.js";
 
       const { scene } = createOrbitScene();
@@ -46,9 +46,8 @@
       gui.add(params, "phiLength", 0, Math.PI * 2).name("Phi Length").step(0.01).onChange(update);
 
       function update() {
-        scene.remove(hill);
-        hill = new Hill(params);
-        scene.add(hill);
+        hill.geometry.dispose();
+        hill.geometry = new HillGeometry(params);
       }
     </script>
   </body>

diff --git a/examples/models/terrain/mound.html b/examples/models/terrain/mound.html
@@ -17,7 +17,7 @@
 <body>
 <script type="module">
   import GUI from "lil-gui";
-  import { Mound } from "../../../src/index.js";
+  import { Mound, MoundGeometry } from "../../../src/index.js";
   import { createOrbitScene } from "../../utils/orbitScene.js";
 
   const { scene } = createOrbitScene()
@@ -46,9 +46,8 @@
   gui.add(params, 'thetaLength', 0.1, Math.PI / 2).name('Theta Length').step(0.01).onChange(update);
 
   function update() {
-    scene.remove(mound);
-    mound = new Mound(params);
-    scene.add(mound);
+    mound.geometry.dispose();
+    mound.geometry = new MoundGeometry(params);
   }
 </script>
 </body>