OpenGeometry-io · aka-blackboots · Mar 1, 2026 · Mar 1, 2026 · Mar 1, 2026 · Mar 1, 2026
diff --git a/AI-DOCs/opengeometry/2026-03-01-wedge-shape-support.md b/AI-DOCs/opengeometry/2026-03-01-wedge-shape-support.md
@@ -5,6 +5,7 @@
 - Registered wedge in the kernel exports and scene manager APIs (`addWedgeToScene` and `addWedgeToCurrentScene`).
 - Extended the PDF primitives example to generate a dedicated wedge projection PDF.
 - Added a new `Wedge` shape wrapper in `opengeometry-three` and exported it in the shapes index.
+- Added a browser example page at `main/opengeometry-three/examples/wedge.html` to visualize wedge geometry in Three.js.
 
 ## Why it changed
 The kernel already supports common primitive and solid shapes (e.g., cuboid and cylinder). Wedge support was added to align with this existing shape model and make wedge available both in kernel usage and the three.js integration package.
@@ -18,6 +19,12 @@ The kernel already supports common primitive and solid shapes (e.g., cuboid and
    - `npm run build-core`
 3. Three package type/build checks:
    - `npm run build-three`
+4. Kernel example output:
+   - `cd main/opengeometry && cargo run --example pdf_primitives_all -- wedge_demo`
+   - Confirm `wedge_demo_wedge.pdf` is generated.
+5. Browser example:
+   - `python3 -m http.server 8080`
+   - Open `http://localhost:8080/main/opengeometry-three/examples/wedge.html`
 4. Example output:
    - `cd main/opengeometry && cargo run --example pdf_primitives_all -- wedge_demo`
    - Confirm `wedge_demo_wedge.pdf` is generated.

diff --git a/main/opengeometry-three/examples/wedge.html b/main/opengeometry-three/examples/wedge.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OpenGeometry Three - Wedge Example</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #111827;
+        color: #f9fafb;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      #app { width: 100%; height: 100%; }
+      .badge {
+        position: fixed;
+        top: 12px;
+        left: 12px;
+        padding: 8px 12px;
+        border-radius: 8px;
+        background: rgba(17, 24, 39, 0.85);
+        border: 1px solid rgba(249, 250, 251, 0.15);
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <div class="badge">OpenGeometry Wedge in Three.js</div>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "../../../node_modules/three/build/three.module.js",
+          "three/examples/jsm/": "../../../node_modules/three/examples/jsm/"
+        }
+      }
+    </script>
+
+    <script type="module">
+      import * as THREE from "https://unpkg.com/three@0.168.0/build/three.module.js";
+      import { OrbitControls } from "https://unpkg.com/three@0.168.0/examples/jsm/controls/OrbitControls.js";
+      import init, { OGWedge, Vector3 } from "../../opengeometry/pkg/opengeometry.js";
+
+      // Prerequisite:
+      // 1) Build wasm bindings from repo root: npm run build-core
+      // 2) Serve repository root: python3 -m http.server 8080
+      // 3) Open: http://localhost:8080/main/opengeometry-three/examples/wedge.html
+
+      await init();
+
+      const app = document.getElementById("app");
+      const scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x111827);
+
+      const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000);
+      camera.position.set(4, 4, 6);
+
+      const renderer = new THREE.WebGLRenderer({ antialias: true });
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      app.appendChild(renderer.domElement);
+
+      const controls = new OrbitControls(camera, renderer.domElement);
+      controls.enableDamping = true;
+
+      scene.add(new THREE.AmbientLight(0xffffff, 0.6));
+      const light = new THREE.DirectionalLight(0xffffff, 1.0);
+      light.position.set(3, 5, 4);
+      scene.add(light);
+      scene.add(new THREE.GridHelper(10, 10, 0x6b7280, 0x374151));
+
+      const wedge = new OGWedge("wedge-example");
+      wedge.set_config(new Vector3(0, 0.8, 0), 2.8, 1.6, 2.0);
+
+      const vertices = JSON.parse(wedge.get_geometry_serialized());
+      const lines = JSON.parse(wedge.get_outline_geometry_serialized());
+
+      const geometry = new THREE.BufferGeometry();
+      geometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
+      geometry.computeVertexNormals();
+
+      const wedgeMesh = new THREE.Mesh(
+        geometry,
+        new THREE.MeshStandardMaterial({ color: 0x3b82f6, transparent: true, opacity: 0.75 })
+      );
+      scene.add(wedgeMesh);
+
+      const outlineGeometry = new THREE.BufferGeometry();
+      outlineGeometry.setAttribute("position", new THREE.Float32BufferAttribute(lines, 3));
+      scene.add(new THREE.LineSegments(outlineGeometry, new THREE.LineBasicMaterial({ color: 0x111111 })));
+
+      function animate() {
+        requestAnimationFrame(animate);
+        controls.update();
+        renderer.render(scene, camera);
+      }
+      animate();
+
+      window.addEventListener("resize", () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+      });
+    </script>
+  </body>
+</html>