refactored ruler

notes.md

@@ -1,3 +1,15 @@
+Geometry
+Handle cutting, folding, creasing
+
+Renderer
+Update visuals given a Geometry
+
+Ruler
+Handling snapping & cut plane creation
+
+
+
+
 1. Get the camera position
 vector.setFromMatrixPosition(camera.matrixWorld)
 

src/index.ts

@@ -4,10 +4,15 @@ import World from './world';
 //import HalfSpace from './half-space';
 import RulerTest from './ruler-test';
 import PolygonTest from './polygon-test';
+import OrigamiRunner from './refactor/index';
 
 function run(){
+
   const world = new World();
   world.start();
+
+  OrigamiRunner.run(world);
+
   //world.add(RulerTest.create(world));
   world.add(PolygonTest.create(world));
 }

src/refactor/index.ts

@@ -0,0 +1,40 @@
+import * as THREE from 'three';
+import OrigamiShape from "./origami-shape";
+import OrigamiMesh from './origami-mesh';
+import Origami from './origami';
+
+function run(world){
+  run2(world);
+}
+
+function run2(world){
+  let origami = new Origami(world, createSquare());
+  world.add(origami);
+
+  let ruler = origami.getRuler();
+
+  window.addEventListener('keyup', (event) => {
+    if(event.key == 't'){
+      ruler.enable()
+    }
+  });
+}
+
+function createSquare(){
+  let geometry = new OrigamiShape();
+  geometry.addVertex(new THREE.Vector3(0,0,0));
+  geometry.addVertex(new THREE.Vector3(50,0,0));
+  geometry.addVertex(new THREE.Vector3(50,50,0));
+  geometry.addVertex(new THREE.Vector3(0,50,0));
+
+  geometry.addVertex2D(new THREE.Vector3(0,0,0));
+  geometry.addVertex2D(new THREE.Vector3(50,0,0));
+  geometry.addVertex2D(new THREE.Vector3(50,50,0));
+  geometry.addVertex2D(new THREE.Vector3(0,50,0));
+
+  geometry.addPolygon([0,1,2,3]);
+
+  return geometry;
+}
+
+export default {run};

src/refactor/origami-mesh.ts

@@ -0,0 +1,89 @@
+import * as THREE from 'three';
+import OrigamiShape from './origami-shape';
+import * as chroma from 'chroma-js';
+
+class OrigamiMesh extends THREE.Object3D {
+  private materials;
+  private group;
+
+  constructor(private shape: OrigamiShape){
+    super();
+    this.init();
+  }
+
+    init(){
+      this.group = new THREE.Group();
+      this.add(this.group);
+
+      this.materials =[
+          new THREE.MeshBasicMaterial({
+          color: chroma('aquamarine').luminance(0.5).hex(),
+          side: THREE.FrontSide,
+          transparent: true,
+          opacity: 0.8
+        }),
+        new THREE.MeshBasicMaterial({
+          color: chroma('hotpink').luminance(0.5).hex(),
+          side: THREE.BackSide,
+          transparent: true,
+          opacity: 0.8
+        }),
+        new THREE.MeshBasicMaterial({
+          wireframe: true,
+          color: 0xffff00,
+          side: THREE.DoubleSide
+        })
+      ]
+    }
+
+    update(){
+      this.group.remove(...this.group.children);
+
+      //creates a combined mesh of front, back and wireframe display
+      let geometry = this.toGeometry();
+      let mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, this.materials)
+
+      let pointGeometry = new THREE.Geometry();
+      pointGeometry.vertices.push(...this.shape.getVertices());
+
+      let points = new THREE.Points(pointGeometry, new THREE.PointsMaterial({
+        sizeAttenuation: false,
+        size: 10,
+        color: 0xffff00
+      }));
+
+
+      this.group.add(mesh);
+      this.group.add(points);
+    }
+
+
+    toGeometry(){
+      let combinedGeometry = new THREE.Geometry();
+
+      this.shape.getPolygons().forEach((polygon, index) => {
+        let geometry = new THREE.Geometry();
+        let vertices = this.shape.getVertices();
+
+        let polygonVertices = polygon.map(index => {
+          return vertices[index].clone()
+        });
+
+
+        let triangles = THREE.ShapeUtils.triangulate(polygonVertices, true);
+        let faces = triangles.map(triangle => new THREE.Face3(triangle[0], triangle[1], triangle[2]));
+
+        geometry.vertices.push(...polygonVertices);
+        geometry.faces.push(...faces);
+
+        geometry.computeFaceNormals();
+        combinedGeometry.merge(geometry, new THREE.Matrix4());
+
+      });
+
+      return combinedGeometry;
+    }
+
+}
+
+export default OrigamiMesh;

src/refactor/origami-shape.ts

@@ -0,0 +1,29 @@
+export default class OrigamiShape {
+  private polygons = [];
+  private vertices = [];
+  private vertices2d = [];
+
+  constructor(){
+    //OrigamiRenderer
+  }
+
+  getVertices(){
+    return this.vertices;
+  }
+
+  getPolygons(){
+    return this.polygons;
+  }
+
+  addVertex(v: THREE.Vector3){
+    this.vertices.push(v);
+  }
+
+  addVertex2D(v: THREE.Vector3){
+    this.vertices2d.push(v);
+  }
+
+  addPolygon(polygon){
+    this.polygons.push(polygon);
+  }
+}

src/refactor/origami.ts

@@ -0,0 +1,50 @@
+import * as THREE from 'three';
+import OrigamiShape from "./origami-shape";
+import OrigamiMesh from "./origami-mesh";
+import Ruler from "./ruler/ruler";
+import World from './../world';
+
+export default class Origami extends THREE.Object3D {
+  private shape: OrigamiShape;
+  private mesh: OrigamiMesh;
+  private ruler: Ruler;
+    constructor(private world: World, initialShape?:OrigamiShape){
+      super();
+      this.shape = initialShape;
+      this.init();
+    }
+
+    init(){
+      this.mesh = new OrigamiMesh(this.shape);
+      //this.mesh.position.y = -75;
+
+      this.mesh.update();
+
+      this.add(this.mesh);
+
+      this.ruler = new Ruler(this.world);
+      this.ruler.addEventListener('enabled', () => {
+        this.world.controls.enabled = false;
+      })
+
+      this.ruler.addEventListener('disabled', () => {
+        this.world.controls.enabled = true;
+      })
+
+      this.ruler.addEventListener('completed', (event:any) => {
+        console.log('handle new plane', event.plane)
+      });
+      //this.ruler.enable();
+
+      this.add(this.ruler);
+    }
+
+
+    getRuler(){
+      return this.ruler;
+    }
+
+    get camera(){
+      return this.world.camera;
+    }
+}

src/refactor/ruler/mouse-controls.ts

@@ -0,0 +1,38 @@
+import * as THREE from 'three';
+
+export default class MouseControls extends THREE.EventDispatcher {
+  constructor(){
+    super();
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+  }
+
+  enable(){
+    document.addEventListener('mousedown', this.handleMouseDown);
+    document.addEventListener('mouseup', this.handleMouseUp);
+  }
+
+  disable(){
+    document.removeEventListener('mousedown', this.handleMouseDown);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+    document.removeEventListener('mousemove', this.handleMouseMove);
+  }
+
+  handleMouseDown(event){
+    document.addEventListener('mousemove', this.handleMouseMove);
+    let { clientX, clientY } = event;
+    this.dispatchEvent({type:'start', x: clientX, y: clientY})
+  }
+
+  handleMouseUp(event){
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    let { clientX, clientY } = event;
+    this.dispatchEvent({type:'complete', x: clientX, y: clientY})
+  }
+
+  handleMouseMove(event){
+    let { clientX, clientY } = event;
+    this.dispatchEvent({type:'move', x: clientX, y: clientY})
+  }
+}

src/refactor/ruler/plane-helper.ts

@@ -0,0 +1,50 @@
+import * as THREE from 'three';
+
+export default class PlaneHelper extends THREE.Object3D {
+  addArrow(pos, direction, absolute = false){
+    let arrow = this.createArrow(0x00ff00);
+    arrow.position.copy(pos);
+    if(absolute){
+      arrow.setLength(direction.length())
+      arrow.setDirection(direction.clone().normalize())
+    }else{
+      arrow.setDirection(direction)
+
+    }
+    this.add(arrow)
+  }
+
+  reset(){
+    while (this.children.length){
+      this.remove(this.children[0]);
+    }
+  }
+
+  fromPlane(mathPlane){
+    this.reset();
+
+    let plane = new THREE.Mesh(new THREE.PlaneGeometry(100,100,10,10), new THREE.MeshBasicMaterial({wireframe: true, side:THREE.DoubleSide}));
+    this.planeToPlane(mathPlane, plane);
+
+    this.add(plane)
+    this.addArrow(mathPlane.coplanarPoint(), mathPlane.normal);
+  }
+
+  planeToPlane(mathPlane, plane, center = null){
+      var coplanarPoint = mathPlane.coplanarPoint();
+      var focalPoint = new THREE.Vector3().copy(coplanarPoint).add(mathPlane.normal);
+      plane.lookAt(focalPoint);
+      if(center){
+        plane.position.copy(center);
+      }else {
+        plane.position.copy(coplanarPoint);
+      }
+  }
+
+ createArrow( color = 0xffff00){
+    return new THREE.ArrowHelper(
+                new THREE.Vector3(),
+                new THREE.Vector3(),
+                100, color);
+  }
+}

src/refactor/ruler/ruler-helper.ts

@@ -0,0 +1,56 @@
+import * as THREE from 'three';
+
+export default class RulerHelper extends THREE.Object3D {
+  private startMarker: THREE.Mesh;
+  private endMarker: THREE.Mesh;
+  private lineMesh: THREE.Line;
+
+  constructor(){
+    super();
+    this.build();
+  }
+
+  build(){
+    var material = new THREE.LineBasicMaterial( {
+      linewidth: 10,
+      color: 0xffffff
+    });
+
+    let geometry = new THREE.Geometry();
+    geometry.vertices.push(new THREE.Vector3(), new THREE.Vector3());
+    let lineMesh = new THREE.Line( geometry, material );
+    this.add(lineMesh);
+    this.lineMesh = lineMesh;
+
+    let startMarker = this.createMarker();
+    this.startMarker = startMarker;
+
+    let endMarker = this.createMarker();
+    this.endMarker = endMarker;
+  }
+
+  createMarker(size = 5, color = 0xffffff){
+    let s = new THREE.Mesh(new THREE.SphereGeometry(size, 10, 10), new THREE.MeshBasicMaterial({wireframe:true, color}));
+    this.add(s);
+    return s;
+  }
+
+  update(p1: THREE.Vector3, p2: THREE.Vector3){
+    if(p1 && p2){
+      let geometry: any = this.lineMesh.geometry;
+      geometry.vertices[ 0 ].copy(p1);
+      geometry.vertices[ 1 ].copy(p2);
+      geometry.verticesNeedUpdate = true;
+    }
+
+    let vector;
+
+    if(p1){
+      this.startMarker.position.copy(p1);
+    }
+
+    if(p2){
+      this.endMarker.position.copy(p2);
+    }
+  }
+}