working 3pt plane

dist/index.html

@@ -30,9 +30,7 @@
       display: block;
     }
 
-    #react {
+
-      position: absolute;
-    }
   </style>
 
 </head>

package-lock.json

@@ -13,6 +13,7 @@
         "react-dom": "^17.0.2",
         "react-redux": "^7.2.3",
         "redux": "^4.0.5",
+        "redux-logger": "^3.0.6",
         "sass": "^1.32.8",
         "sass-loader": "^11.0.1",
         "stats-js": "^1.0.1",
@@ -1841,6 +1842,12 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/deep-diff": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
+      "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=",
+      "dev": true
+    },
     "node_modules/deep-equal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
@@ -5090,6 +5097,15 @@
         "symbol-observable": "^1.2.0"
       }
     },
+    "node_modules/redux-logger": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
+      "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=",
+      "dev": true,
+      "dependencies": {
+        "deep-diff": "^0.3.5"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
@@ -9065,6 +9081,12 @@
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
       "dev": true
     },
+    "deep-diff": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
+      "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=",
+      "dev": true
+    },
     "deep-equal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
@@ -11599,6 +11621,15 @@
         "symbol-observable": "^1.2.0"
       }
     },
+    "redux-logger": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
+      "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=",
+      "dev": true,
+      "requires": {
+        "deep-diff": "^0.3.5"
+      }
+    },
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",

package.json

@@ -3,7 +3,7 @@
     "start": "webpack serve --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js",
     "get-bundle-size": "webpack --profile --json > stats.json --config webpack.prod.js && webpack-bundle-analyzer stats.json dist/",
-    "deploy": "webpack --config webpack.prod.js && gh-pages -d dist -t true"
+    "deploy": "webpack --config webpack.prod.js && gh-pages -d dist -t true -m"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.12.13",
@@ -14,6 +14,7 @@
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.3",
     "redux": "^4.0.5",
+    "redux-logger": "^3.0.6",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
     "stats-js": "^1.0.1",

src/Renderer.js

@@ -0,0 +1,194 @@
+
+
+
+import * as THREE from 'three/src/Three';
+// import { OrbitControls } from './utils/OrbitControls'
+import { TrackballControls } from './utils/trackball'
+import { Sketcher } from './sketcher/Sketcher'
+import Stats from './utils/stats.module.js';
+
+import { add3DPoint } from './datums'
+
+
+export function Renderer(store) {
+  this.store = store
+  this.stats = new Stats();
+  this.stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+  document.getElementById('stats').appendChild(this.stats.dom);
+
+  this.canvas = document.querySelector('#c');
+  this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas });
+
+  this.scene = new THREE.Scene();
+  this.raycaster = new THREE.Raycaster();
+
+  window.scene = this.scene;
+  this.scene.background = new THREE.Color(0xb0b0b0);
+
+  const helpersGroup = new THREE.Group();
+  helpersGroup.name= "helpersGroup"
+  this.scene.add(helpersGroup);
+  const axesHelper = new THREE.AxesHelper(5);
+  helpersGroup.add(axesHelper);
+
+  const size = 1;
+  const near = 0;
+  const far = 100;
+  this.camera = new THREE.OrthographicCamera(-size, size, size, -size, near, far);
+  this.camera.zoom = 0.1;
+  this.camera.position.set(0, 0, 50);
+
+  // const controls = new OrbitControls(camera, view1Elem);
+  const controls = new TrackballControls(this.camera, this.canvas);
+  controls.target.set(0, 0, 0);
+  controls.update()
+
+
+
+  const color = 0xFFFFFF;
+  const intensity = 1;
+  const light1 = new THREE.DirectionalLight(color, intensity);
+  light1.position.set(10, 10, 10);
+  this.scene.add(light1);
+
+  const light2 = new THREE.DirectionalLight(color, intensity);
+  light2.position.set(-10, -10, -5);
+  this.scene.add(light2);
+  const ambient = new THREE.AmbientLight(color, intensity);
+  this.scene.add(ambient);
+
+
+
+
+  // this.defaultPlanes = [
+  //   new THREE.Plane(new THREE.Vector3(0, 0, 1), 0),
+  //   new THREE.Plane(new THREE.Vector3(0, 1, 0), 0),
+  //   new THREE.Plane(new THREE.Vector3(1, 0, 0), 0),
+  // ]
+
+  // this.defaultPlanes.forEach(pl => {
+  //   const helper = new THREE.PlaneHelper(pl, 10, 0xffffff)
+  //   this.scene.add(helper);
+  // })
+
+
+
+
+
+
+
+
+  const unsubscribe = store.subscribe(handleChange.bind(this))
+
+  let state;
+  function handleChange() {
+    let prevState = state
+    state = store.getState()
+
+    // if (prevState.sketches.length < state.sketches.length) {
+
+
+    // }
+
+    // if (state.toggle) {
+    //   window.addEventListener('keydown', this.sketcher.onKeyPress)
+    //   canvas.addEventListener('pointerdown', this.sketcher.onPick)
+    //   canvas.addEventListener('pointermove', this.sketcher.onHover)
+    //   canvas.removeEventListener('pointerdown', this.add3DPoint)
+    // } else {
+    //   window.removeEventListener('keydown', this.sketcher.onKeyPress)
+    //   canvas.removeEventListener('pointerdown', this.sketcher.onPick)
+    //   canvas.removeEventListener('pointermove', this.sketcher.onHover)
+    //   canvas.addEventListener('pointerdown', this.add3DPoint)
+    // }
+
+  }
+
+
+
+  this.hovered = []
+  this.selected = new Set()
+
+  this.render = render.bind(this)
+  this.resizeCanvas = resizeCanvas.bind(this)
+  this.addSketch = addSketch.bind(this)
+  // this.waitPoint = waitPoint.bind(this)
+
+  controls.addEventListener('change', this.render);
+  controls.addEventListener('start', this.render);
+  window.addEventListener('resize', this.render);
+  this.render()
+}
+
+function render() {
+  this.stats.begin();
+  if (this.resizeCanvas(this.renderer)) {
+    const canvas = this.renderer.domElement;
+    this.camera.left = -canvas.clientWidth / canvas.clientHeight;
+    this.camera.right = canvas.clientWidth / canvas.clientHeight;
+    this.camera.updateProjectionMatrix();
+  }
+  this.renderer.render(scene, this.camera);
+  this.stats.end();
+}
+
+function resizeCanvas(renderer) {
+  const canvas = renderer.domElement;
+  const width = canvas.clientWidth;
+  const height = canvas.clientHeight;
+  const needResize = canvas.width !== width || canvas.height !== height;
+  if (needResize) {
+    renderer.setSize(width, height, false);
+  }
+  return needResize;
+}
+
+
+async function addSketch() {
+
+  const result = []
+  for (let i = 0; i < 3; i++) {
+    const pt = await new Promise((res, rej) => {
+      this.canvas.addEventListener('pointerdown', (e) => res(getPoint(e, this.camera)), { once: true })
+    })
+    result.push(pt)
+  }
+
+  const sketcher = new Sketcher(this.camera, this.canvas, this.store)
+  this.scene.add(sketcher)
+
+  sketcher.align(...result)
+
+
+
+  window.addEventListener('keydown', sketcher.onKeyPress)
+  this.canvas.addEventListener('pointerdown', sketcher.onPick)
+  this.canvas.addEventListener('pointermove', sketcher.onHover)
+
+  sketcher.addEventListener('change', this.render);
+
+  // window.sketcher = sketcher
+
+  this.store.dispatch({ type: 'rx-new-sketch', idx: this.scene.children.length - 1 })
+
+}
+
+async function down2() {
+  const result = []
+  for (let i = 0; i < 3; i++) {
+    const pt = await new Promise((res, rej) => {
+      this.canvas.addEventListener('pointermove', (e) => res(getPoint(e, this.camera)), { once: true })
+    })
+    result.push(pt)
+  }
+}
+
+
+
+function getPoint(e, camera) {
+  const mouse = new THREE.Vector2(
+    (e.clientX / window.innerWidth) * 2 - 1,
+    - (e.clientY / window.innerHeight) * 2 + 1
+  )
+  return new THREE.Vector3(mouse.x, mouse.y, 0).unproject(camera)
+}

src/app.jsx

@@ -1,19 +1,32 @@
 
 
 import React from 'react';
-import { Provider } from 'react-redux';
 import './app.scss'
 
+import { Provider, useDispatch, useSelector } from 'react-redux'
+import { renderInst } from './index'
+
 export const Root = ({ store }) => (
   <Provider store={store}>
     <App></App>
   </Provider>
 );
 
-
 const App = () => {
+  const dispatch = useDispatch()
+  const sketches = useSelector(state => state.sketches)
 
   return <>
-    <div>in the world where</div>
+    <button onClick={() => dispatch({ type: 'toggle', payload: true })}> true</button>
+    <button onClick={() => dispatch({ type: 'toggle', payload: false })}> false </button>
+    <button onClick={renderInst.addSketch}> addsketch </button>
+
+    <div className='feature-tree'>
+      {sketches.map((e, idx) => (
+        <div key={idx}>{e}</div>
+      ))}
+    </div>
+
   </>
 }
+

src/app.scss

@@ -1,4 +1,9 @@
-div {
+
+#react {
+  position: absolute;
+}
+
+.feature-tree {
   color: red;
   position: absolute;
   right:0;

src/datums.js

@@ -0,0 +1,74 @@
+import * as THREE from '../node_modules/three/src/Three';
+
+
+
+
+export function add3DPoint(e) {
+
+  // const mouse = new THREE.Vector2(
+  //   (e.clientX / window.innerWidth) * 2 - 1,
+  //   - (e.clientY / window.innerHeight) * 2 + 1
+  // )
+
+  // console.log(new THREE.Vector3(mouse.x, mouse.y, 0).unproject(this.camera))
+
+  // this.raycaster.ray.intersectPlane(this.plane, this.target).applyMatrix4(this.inverse)
+
+  this.raycaster.setFromCamera(
+    new THREE.Vector2(
+      (e.clientX / window.innerWidth) * 2 - 1,
+      - (e.clientY / window.innerHeight) * 2 + 1
+    ),
+    this.camera
+  );
+
+  // const hoverPts = this.raycaster.intersectObjects(this.scene.children)
+  const hoverPts = this.raycaster.intersectObjects(this.sketcher.children)
+
+  console.log(hoverPts)
+
+  let idx = []
+  if (hoverPts.length) {
+    let minDist = Infinity;
+    for (let i = 0; i < hoverPts.length; i++) {
+      if (!hoverPts[i].distanceToRay) continue;
+      if (hoverPts[i].distanceToRay < minDist) {
+        minDist = hoverPts[i].distanceToRay
+        idx = [i]
+      } else if (hoverPts[i].distanceToRay == minDist) {
+        idx.push(i)
+      }
+    }
+    if (!idx.length) idx.push(0)
+  }
+
+  if (idx.length) {
+    if (hoverPts[idx[0]].object != this.hovered[0]) {
+
+      for (let ob of this.hovered) {
+        if (ob && !this.selected.has(ob)) {
+          ob.material.color.set(0x555555)
+        }
+      }
+      this.hovered = []
+
+      for (let i of idx) {
+        hoverPts[i].object.material.color.set(0x00FFFF)
+        this.hovered.push(hoverPts[i].object)
+      }
+      // console.log('render1')
+      this.render()
+    }
+  } else {
+    if (this.hovered.length) {
+      for (let ob of this.hovered) {
+        if (ob && !this.selected.has(ob)) {
+          ob.material.color.set(0x555555)
+        }
+      }
+      this.hovered = []
+      // console.log('render2')
+      this.render()
+    }
+  }
+}

src/index.js

@@ -1,124 +1,35 @@
 
-
-import * as THREE from '../node_modules/three/src/Three';
-import { OrbitControls } from './OrbitControls'
-import { TrackballControls } from './trackball'
-import { Sketcher } from './sketcher/Sketcher'
-import Stats from './stats.module.js';
 import ReactDOM from 'react-dom'
 import React from 'react'
 import { createStore, applyMiddleware } from 'redux'
+import logger from 'redux-logger'
 
 import { Root } from './app.jsx'
-
+import { Renderer } from "./Renderer"
-
-function main(store) {
-  var stats = new Stats();
-  stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
-  document.getElementById('stats').appendChild(stats.dom);
-
-  const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({ canvas });
-
-  const scene = new THREE.Scene();
-  window.scene = scene;
-  scene.background = new THREE.Color(0xb0b0b0);
-
-  const helpersGroup = new THREE.Group();
-  scene.add(helpersGroup);
-  const axesHelper = new THREE.AxesHelper(5);
-  helpersGroup.add(axesHelper);
-
-  const size = 1;
-  const near = 5;
-  const far = 50;
-  const camera = new THREE.OrthographicCamera(-size, size, size, -size, near, far);
-  camera.zoom = 0.1;
-  camera.position.set(0, 0, 30);
-
-  // const controls = new OrbitControls(camera, view1Elem);
-  const controls = new TrackballControls(camera, canvas);
-  controls.target.set(0, 0, 0);
-  controls.update()
 
 
 
-  const color = 0xFFFFFF;
+function reducer(state = {}, action) {
-  const intensity = 1;
-  const light1 = new THREE.DirectionalLight(color, intensity);
-  light1.position.set(10, 10, 10);
-  scene.add(light1);
-
-  const light2 = new THREE.DirectionalLight(color, intensity);
-  light2.position.set(-10, -10, -5);
-  scene.add(light2);
-
-  const ambient = new THREE.AmbientLight(color, intensity);
-  scene.add(ambient);
-
-
-  const sketchPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
-  const sketcher = new Sketcher(camera, canvas, sketchPlane)
-  window.sketcher = sketcher
-  scene.add(sketcher)
-
-
-  function resizeRendererToDisplaySize(renderer) {
-    const canvas = renderer.domElement;
-    const width = canvas.clientWidth;
-    const height = canvas.clientHeight;
-    const needResize = canvas.width !== width || canvas.height !== height;
-    if (needResize) {
-      renderer.setSize(width, height, false);
-    }
-    return needResize;
-  }
-
-  function render() {
-    stats.begin();
-    if (resizeRendererToDisplaySize(renderer)) {
-      const canvas = renderer.domElement;
-      camera.left = -canvas.clientWidth / canvas.clientHeight;
-      camera.right = canvas.clientWidth / canvas.clientHeight;
-      camera.updateProjectionMatrix();
-    }
-    renderer.render(scene, camera);
-    stats.end();
-  }
-  controls.addEventListener('change', render);
-  controls.addEventListener('start', render);
-  sketcher.addEventListener('change', render);
-  window.addEventListener('resize', render);
-  render();
-}
-
-function todos(state = [], action) {
   switch (action.type) {
-    case 'ADD_TODO':
+    case 'toggle':
-      return state.concat([action.text])
+      return { ...state, toggle: action.payload }
+    case 'rx-new-sketch':
+      return { ...state, sketches: [...state.sketches, action.idx] }
     default:
       return state
   }
 }
 
-const store = createStore(todos, ['Use Redux'])
+export const store = createStore(reducer, {sketches:[]}, applyMiddleware(logger))
-
+window.store = store;
-store.dispatch({
-  type: 'ADD_TODO',
-  text: 'Read the docs'
-})
-
-console.log(store.getState())
 
 
-// main(store);
+
-main(store);
+export const renderInst = new Renderer(store);
 
 document.addEventListener('DOMContentLoaded', () => {
-
   ReactDOM.render(
     React.createElement(Root, { store: store }, null)
     , document.getElementById('react')
   );
-
 });

src/sketcher/Sketcher.js

@@ -21,23 +21,25 @@ const pointMaterial = new THREE.PointsMaterial({
 })
 
 class Sketcher extends THREE.Group {
-  constructor(camera, domElement, plane) {
+  constructor(camera, domElement, store) {
     super()
     this.camera = camera;
     this.domElement = domElement;
     this.matrixAutoUpdate = false;
+    this.store = store;
 
-    this.plane = plane;
+    this.sub = new THREE.Group();
+    this.add(this.sub);
+
+    this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
     this.sketchNormal = new THREE.Vector3(0, 0, 1)
-    this.orientSketcher(plane)
-    this.add(new THREE.PlaneHelper(this.plane, 1, 0xffff00));
 
-    this.sketch = new THREE.Group();
-    this.add(this.sketch);
 
-    this.raycaster = new THREE.Raycaster();
+    const axesHelper = new THREE.AxesHelper(2);
-    this.raycaster.params.Line.threshold = 0.8;
+    this.sub.add(axesHelper);
-    this.raycaster.params.Points.threshold = 1.5;
+
+
+
 
     // [0]:x, [1]:y, [2]:z
     this.objIdx = new Map()
@@ -76,28 +78,61 @@ class Sketcher extends THREE.Group {
 
     this.onKeyPress = this.onKeyPress.bind(this);
 
-    window.addEventListener('keydown', this.onKeyPress)
+    // window.addEventListener('keydown', this.onKeyPress)
-    domElement.addEventListener('pointerdown', this.onPick)
+    // domElement.addEventListener('pointerdown', this.onPick)
-    domElement.addEventListener('pointermove', this.onHover)
+    // domElement.addEventListener('pointermove', this.onHover)
+
+    this.raycaster = new THREE.Raycaster();
+    this.raycaster.params.Line.threshold = 0.8;
+    this.raycaster.params.Points.threshold = 1.5;
+    this.selected = new Set()
+    this.hovered = []
 
     this.mode = ""
     this.subsequent = false;
-    this.selected = new Set()
-    this.hovered = []
     this.target = new THREE.Vector3();
   }
 
-  orientSketcher() {
-    const theta = this.sketchNormal.angleTo(this.plane.normal)
-    const axis = this.sketchNormal.clone().cross(this.plane.normal).normalize()
-    const rot = new THREE.Matrix4().makeRotationAxis(axis, theta)
-    const trans = new THREE.Matrix4().makeTranslation(0, 0, this.plane.constant)
 
-    this.matrix = rot.multiply(trans) // world matrix will auto update in next render
+
+
+  align(origin, x_dir, y_dir) {
+    // this.updateWorldMatrix(true, false);
+
+    const up = new THREE.Vector3().subVectors(y_dir, origin).normalize();
+
+    const _m1 = new THREE.Matrix4()
+
+    const te = _m1.elements;
+
+    const _x = new THREE.Vector3().subVectors(x_dir, origin).normalize();
+
+    const _z = new THREE.Vector3().crossVectors(_x, up).normalize();
+
+    const _y = new THREE.Vector3().crossVectors(_z, _x);
+
+    te[0] = _x.x; te[4] = _y.x; te[8] = _z.x;
+    te[1] = _x.y; te[5] = _y.y; te[9] = _z.y;
+    te[2] = _x.z; te[6] = _y.z; te[10] = _z.z;
+
+    this.quaternion.setFromRotationMatrix(_m1);
+
+    const parent = this.parent;
+    _m1.extractRotation(parent.matrixWorld);
+    const _q1 = new THREE.Quaternion().setFromRotationMatrix(_m1);
+    this.quaternion.premultiply(_q1.invert());
+
+    this.updateMatrix();
+    this.matrix.setPosition(origin)
+
+    this.plane.applyMatrix4(this.matrix)
+
     this.inverse = this.matrix.clone().invert()
 
   }
 
+
+
   onKeyPress(e) {
     switch (e.key) {
       case 'Escape':
@@ -127,23 +162,13 @@ class Sketcher extends THREE.Group {
       case 'e':
         extrude.call(this)
         break;
-      case '=':
-        this.plane.applyMatrix4(new Matrix4().makeRotationY(0.1))
-        this.orientSketcher()
-        this.dispatchEvent({ type: 'change' })
-        break;
-      case '-':
-        this.plane.applyMatrix4(new Matrix4().makeRotationY(-0.1))
-        this.orientSketcher()
-        this.dispatchEvent({ type: 'change' })
-        break;
     }
   }
 
 
 
   deleteSelected() {
-    let minI = this.sketch.children.length;
+    let minI = this.children.length;
 
     for (let obj of this.selected) {
       minI = Math.min(minI, this.delete(obj))
@@ -197,10 +222,10 @@ class Sketcher extends THREE.Group {
     if (!link) return Infinity;
     link = link[1]
 
-    let i = this.sketch.children.indexOf(link[0])
+    let i = this.children.indexOf(link[0])
 
     for (let j = 0; j < link.length; j++) {
-      const obj = this.sketch.children[i + j]
+      const obj = this.children[i + j]
       obj.geometry.dispose()
       obj.material.dispose()
 
@@ -209,7 +234,7 @@ class Sketcher extends THREE.Group {
       }
     }
 
-    this.sketch.children.splice(i, link.length)
+    this.children.splice(i, link.length)
 
     this.linkedObjs.delete(obj.l_id)
 
@@ -217,8 +242,8 @@ class Sketcher extends THREE.Group {
   }
 
   updatePointsBuffer(startingIdx = 0) {
-    for (let i = startingIdx; i < this.sketch.children.length; i++) {
+    for (let i = startingIdx; i < this.children.length; i++) {
-      const obj = this.sketch.children[i]
+      const obj = this.children[i]
       this.objIdx.set(obj.id, i)
       if (obj.type == "Points") {
         this.ptsBuf.set(obj.geometry.attributes.position.array, 3 * i)
@@ -258,18 +283,20 @@ class Sketcher extends THREE.Group {
     Module.HEAPF32.set(this.linksBuf, links_buffer >> 2)
 
     Module["_solver"](
-      this.sketch.children.length, pts_buffer,
+      this.children.length, pts_buffer,
       this.constraints.size, constraints_buffer,
       this.linkedObjs.size, links_buffer)
 
-    let ptr = pts_buffer >> 2;
+    /*
+    - loop to update all the children that are points
+    - we skip first triplet because it refers to a non-geometry child
+    - we also sneak in updating lines children as well, by checking when ptsBuf[ptr] is NaN
+    */
 
+    for (let i = 1, ptr = (pts_buffer >> 2) + 3; i < this.children.length; i += 1, ptr += 3) {
 
-    for (let i = 0; i < this.sketch.children.length; i += 1) {
+      const pos = this.children[i].geometry.attributes.position;
-
-      const pos = this.sketch.children[i].geometry.attributes.position;
       if (isNaN(Module.HEAPF32[ptr])) {
-
         pos.array[0] = Module.HEAPF32[ptr - 6]
         pos.array[1] = Module.HEAPF32[ptr - 5]
         pos.array[3] = Module.HEAPF32[ptr - 3]
@@ -278,7 +305,7 @@ class Sketcher extends THREE.Group {
         pos.array[0] = Module.HEAPF32[ptr]
         pos.array[1] = Module.HEAPF32[ptr + 1]
       }
-      ptr += 3;
+
       pos.needsUpdate = true;
     }
 
@@ -286,9 +313,12 @@ class Sketcher extends THREE.Group {
     Module._free(links_buffer)
     Module._free(constraints_buffer)
 
-
+    /*
+      arcs were not updated in above loop, we go through all arcs linkedObjs 
+      and updated based on the control pts (which were updated in loop above)
+    */
     for (let [k, obj] of this.linkedObjs) {
-      if (obj[0] == 'line') continue;
+      if (obj[0] != 'arc') continue;
       const [p1, p2, c, arc] = obj[1]
 
       const points = get3PtArc(

src/sketcher/drawEvents.js

@@ -13,8 +13,8 @@ export function drawOnClick1(e) {
     this.toPush = sketchArc(mouseLoc)
   }
 
-  this.updatePoint = this.sketch.children.length
+  this.updatePoint = this.children.length
-  this.sketch.add(...this.toPush)
+  this.add(...this.toPush)
 
   this.linkedObjs.set(this.l_id, [this.mode, this.toPush])
   for (let obj of this.toPush) {
@@ -65,7 +65,7 @@ export function drawClear() {
     this.domElement.removeEventListener('pointermove', this.drawPreClick2);
     this.domElement.removeEventListener('pointerdown', this.drawOnClick2);
 
-    this.delete(this.sketch.children[this.sketch.children.length - 1])
+    this.delete(this.children[this.children.length - 1])
 
     this.dispatchEvent({ type: 'change' })
     this.subsequent = false

src/sketcher/extrude.js

@@ -6,7 +6,7 @@ export function extrude() {
 
   let constraints = this.constraints;
   let linkedObjs = this.linkedObjs;
-  let children = this.sketch.children;
+  let children = this.children;
   let visited = new Set()
   let v2s = []
 
@@ -26,7 +26,7 @@ export function extrude() {
     for (let i = 0; i < 2; i++) {
       let d = linkedObj[1][i]
       if (d == -1 || d == node) continue;
-      if (d == children[0]) {
+      if (d == children[1]) {
         console.log('pair found')
       };
       findTouching(d)
@@ -52,19 +52,48 @@ export function extrude() {
   }
 
 
-  findPair(children[0])
+  findPair(children[1])
 
   const shape = new THREE.Shape(v2s);
 
-  const extrudeSettings = { depth: 8, bevelEnabled: false};
+  const extrudeSettings = { depth: 8, bevelEnabled: false };
 
   const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
 
-  const phong = new THREE.MeshPhongMaterial( { color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true } );
+  const phong = new THREE.MeshPhongMaterial({ color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true });
   const mesh = new THREE.Mesh(geometry, phong);
+
+
+  const wireframe = new THREE.WireframeGeometry(geometry);
+
+
+
+
+  const pointMaterial = new THREE.PointsMaterial({
+    color: 0x555555,
+    size: 4,
+  })
+
+
+
+
+  const pts = new THREE.Points(wireframe, pointMaterial);
+  this.add(pts)
+
+
+
+  // const line = new THREE.LineSegments( wireframe );
+  // line.material.depthTest = true;
+  // line.material.linewidth = 4;
+
+  // line.material.opacity = 0.25;
+  // // line.material.transparent = true;
+  // line.material.transparent = false;
+  // this.add(line)
+
   this.add(mesh)
   this.dispatchEvent({ type: 'change' })
-  // this.sketch.visible = false
+  // this.visible = false
 }
 
 

src/sketcher/pickEvents.js

@@ -11,9 +11,10 @@ export function onHover(e) {
     this.camera
   );
 
-  const hoverPts = this.raycaster.intersectObjects(this.sketch.children)
+  const hoverPts = this.raycaster.intersectObjects(this.children)
   
   let idx = []
+  console.log(hoverPts)
   if (hoverPts.length) {
     let minDist = Infinity;
     for (let i = 0; i < hoverPts.length; i++) {
@@ -31,28 +32,35 @@ export function onHover(e) {
   if (idx.length) {
     if (hoverPts[idx[0]].object != this.hovered[0]) {
 
-      for (let ob of this.hovered) {
+      for (let x = 0; x < this.hovered.length; x++) {
-        if (ob && !this.selected.has(ob)) {
+        const obj = this.hovered[x]
-          ob.material.color.set(0x555555)
+        if (obj && !this.selected.has(obj)) {
+          obj.material.color.set(0x555555)
         }
       }
       this.hovered = []
 
-      for (let i of idx) {
+      console.log(idx.length)
+      for (let x = 0; x < idx.length; x++) {
+        const i = idx[x]
         hoverPts[i].object.material.color.set(0x00ff00)
         this.hovered.push(hoverPts[i].object)
       }
+
       // console.log('render1')
       this.dispatchEvent({ type: 'change' })
     }
   } else {
     if (this.hovered.length) {
-      for (let ob of this.hovered) {
+
-        if (ob && !this.selected.has(ob)) {
+      for (let x = 0; x < this.hovered.length; x++) {
-          ob.material.color.set(0x555555)
+        const obj = this.hovered[x]
+        if (obj && !this.selected.has(obj)) {
+          obj.material.color.set(0x555555)
         }
       }
       this.hovered = []
+
       // console.log('render2')
       this.dispatchEvent({ type: 'change' })
     }
@@ -65,8 +73,9 @@ export function onPick(e) {
 
   if (this.hovered.length) {
 
-    for (let h of this.hovered) {
+    for (let x = 0; x < this.hovered.length; x++) {
-      this.selected.add(h)
+      const obj = this.hovered[x]
+      this.selected.add(obj)
     }
 
     if (this.hovered[0].type == "Points") {
@@ -85,10 +94,11 @@ export function onPick(e) {
 export function onDrag(e) {
   const mouseLoc = this.getLocation(e);
 
-  for (let h of this.hovered) {
+  for (let x = 0; x < this.hovered.length; x++) {
+    const obj = this.hovered[x]
     this.ptsBuf.set(
       mouseLoc,
-      this.objIdx.get(h.id) * 3
+      this.objIdx.get(obj.id) * 3
     )
   }
 
@@ -101,8 +111,9 @@ export function onRelease() {
   this.domElement.removeEventListener('pointermove', this.onDrag)
   this.domElement.removeEventListener('pointerup', this.onRelease)
 
-  for (let ii of this.hovered) {
+  for (let x = 0; x < this.hovered.length; x++) {
-    ii.geometry.computeBoundingSphere()
+    const obj = this.hovered[x]
+    obj.geometry.computeBoundingSphere()
   }
 
 }

src/sketcher/sketchArc.js

@@ -101,8 +101,9 @@ export function get3PtArc(p1, p2, c, divisions = 36) {
   const radius = Math.sqrt(v1[0] ** 2 + v1[1] ** 2)
 
   let deltaAngle = a2 - a1
-  if (deltaAngle <0) deltaAngle += Math.PI*2
+  if (deltaAngle <=0) deltaAngle += Math.PI*2
   // console.log(deltaAngle)
+  
   let points = new Float32Array((divisions + 1) * 3)
 
   for (let d = 0; d <= divisions; d++) {

src/sketcher/sketchLine.js

@@ -41,12 +41,12 @@ export function sketchLine(mouseLoc) {
     this.constraints.set(++this.c_id,
       [
         'coincident', -1,
-        [this.sketch.children[this.sketch.children.length - 2], p1, -1, -1]
+        [this.children[this.children.length - 2], p1, -1, -1]
       ]
     )
 
     p1.constraints.add(this.c_id)
-    this.sketch.children[this.sketch.children.length - 2].constraints.add(this.c_id)
+    this.children[this.children.length - 2].constraints.add(this.c_id)
 
   }
 

src/utils/OrbitControls.js

@@ -6,7 +6,7 @@ import {
 	TOUCH,
 	Vector2,
 	Vector3
-} from '../node_modules/three/src/Three';
+} from '../../node_modules/three/src/Three';
 
 
 // This set of controls performs orbiting, dollying (zooming), and panning.

src/utils/trackball.js

@@ -4,7 +4,7 @@ import {
 	Quaternion,
 	Vector2,
 	Vector3
-} from '../node_modules/three/src/Three';
+} from '../../node_modules/three/src/Three';
 
 var TrackballControls = function ( object, domElement ) {
 
@@ -25,8 +25,7 @@ var TrackballControls = function ( object, domElement ) {
 
 	this.rotateSpeed = 3.0;
 	this.zoomSpeed = 1.2;
-	// this.panSpeed = 89.5;
+	this.panSpeed = 41.6;
-	this.panSpeed = 70;
 
 	this.noRotate = false;
 	this.noZoom = false;