add crude rendering of sketch polys

src/geo/polygon.js

@@ -2151,11 +2151,18 @@ class Polygon {
 
     // extrude poly (with inner voids) into 3d mesh
     extrude(z = 1, opt = {}) {
+        let earcut = this.earcut(); // array of 3-point polygons
+
+        // return just the 2D face when no Z depth specified
+        // used primarily by mesh.sketch render()
+        if (z === 0) {
+            return earcut.map(face => face.points.map(p => [ p.x, p.y, p.z ])).flat().flat();
+        }
+
         let chamfer = opt.chamfer || 0;
         let chamfer_top = opt.chamfer_top || chamfer;
         let chamfer_bottom = opt.chamfer_bottom || chamfer;
         let zadd = (typeof opt === 'number' ? opt : opt.zadd || 0); // z bottom
-        let earcut = this.earcut(); // array of 3-point polygons
         let obj = []; // flat output vertex array (float-x,float-y,float-z,...)
         let top_face = earcut;
         let bottom_face = earcut;

src/mesh/sketch.js

@@ -4,15 +4,16 @@
 
 // dep: add.array
 // dep: add.three
+// dep: geo.polygon
 // dep: moto.license
 // dep: moto.client
 // dep: mesh.object
 // dep: mesh.api
-// dep: base.polygon
 // use: mesh.util
 // use: mesh.group
 gapp.register("mesh.sketch", [], (root, exports) => {
 
+const { BufferGeometry, BufferAttribute } = THREE;
 const { MeshBasicMaterial, LineBasicMaterial, LineSegments, DoubleSide } = THREE;
 const { PlaneGeometry, EdgesGeometry, SphereGeometry, Vector3, Mesh, Group } = THREE;
 const { base, mesh, moto } = root;
@@ -71,7 +72,7 @@ mesh.sketch = class MeshSketch extends mesh.object {
 
         group.add(...handles, outline, plane);
 
-        util.defer(() => this.update());
+        util.defer(() => this.render());
     }
 
     update() {
@@ -201,15 +202,42 @@ mesh.sketch = class MeshSketch extends mesh.object {
 
     add_circle(opt = {}) {
         log(this.file || this.id, '| add circle');
-        Object.assign(opt, { center: {x:0, y:0, z:0}, radius:15 }, opt);
+        Object.assign(opt, { center: {x:0, y:0, z:0}, radius:5 }, opt);
         this.items.push({ type: "circle", ...opt });
-        this.update();
+        this.render();
     }
 
     add_rectangle(opt = {}) {
         log(this.file || this.id, '| add rectangle');
-        Object.assign(opt, { center: {x:0, y:0, z:0}, width:15, height: 10 }, opt);
+        Object.assign(opt, { center: {x:0, y:0, z:0}, width:15, height:10 }, opt);
         this.items.push({ type: "rectangle", ...opt });
+        this.render();
+    }
+
+    // render items unto the group object
+    render() {
+        let { group } = this;
+        // remove previous item/poly-based children of group
+        group.children.filter(c => c.poly).forEach(c => group.remove(c));
+        // mapy items into polys into meshes to add to group
+        this.items.map(item => {
+            let { type, center, width, height, radius, spacing, poly } = item;
+            if (type === 'circle') {
+                let circumference = 2 * Math.PI * radius;
+                let points = Math.floor(circumference / (spacing || 1));
+                poly = newPolygon().centerCircle(center, radius, points).annotate({ item } );
+            } else if (type === 'rectangle') {
+                poly = newPolygon().centerRectangle(center, width, height).annotate({ item });
+            }
+            return poly;
+        }).filter(o => o).forEach(poly => {
+            let vrt = poly.extrude(0).toFloat32();
+            let geo = new BufferGeometry();
+            geo.setAttribute('position', new BufferAttribute(vrt, 3));
+            let meh = new Mesh(geo, mesh.material.normal);
+            meh.poly = poly;
+            group.add(meh);
+        });
         this.update();
     }
 }