split sketch from sketch

src/Scene.js

@@ -26,9 +26,8 @@ const eq = (a1, a2) => {
 
 window.nid = 0
 
-export class Scene extends THREE.Scene {
+export class Scene {
   constructor(store) {
-    super()
 
     this.store = store;
     this.canvas = document.querySelector('#c');
@@ -46,11 +45,12 @@ export class Scene extends THREE.Scene {
     controls.target.set(0, 0, 0);
     controls.update();
 
+    this.sketch = new THREE.Scene()
 
-    this.background = new THREE.Color(0x888888);
+    this.sketch.background = new THREE.Color(0x888888);
     const helpersGroup = new THREE.Group();
     helpersGroup.name = "helpersGroup";
-    this.add(helpersGroup);
+    this.sketch.add(helpersGroup);
     const axesHelper = new THREE.AxesHelper(0.4);
     helpersGroup.add(axesHelper);
 
@@ -85,13 +85,13 @@ export class Scene extends THREE.Scene {
     const intensity = 1;
     const light1 = new THREE.DirectionalLight(color.lighting, intensity);
     light1.position.set(10, 10, 10);
-    this.add(light1);
+    this.sketch.add(light1);
 
     const light2 = new THREE.DirectionalLight(color.lighting, intensity);
     light2.position.set(-10, -10, -5);
-    this.add(light2);
+    this.sketch.add(light2);
     const ambient = new THREE.AmbientLight(color.lighting, intensity);
-    this.add(ambient);
+    this.sketch.add(ambient);
 
 
 
@@ -101,7 +101,7 @@ export class Scene extends THREE.Scene {
     this.onHover = onHover.bind(this);
     this.onPick = onPick.bind(this);
 
-    this.addEventListener('change', this.render);
+    this.sketch.addEventListener('change', this.render);
     controls.addEventListener('change', this.render);
     controls.addEventListener('start', this.render);
     window.addEventListener('resize', this.render);
@@ -132,7 +132,7 @@ export class Scene extends THREE.Scene {
   saveState() {
 
     localStorage.setItem(
-      'sv', JSON.stringify([id, this.store.getState(), this.children.slice(4)])
+      'sv', JSON.stringify([id, this.store.getState(), this.sketch.children.slice(4)])
     )
 
   }
@@ -167,7 +167,7 @@ function render() {
     this.camera.right = canvas.clientWidth / canvas.clientHeight;
     this.camera.updateProjectionMatrix();
   }
-  this.renderer.render(this, this.camera);
+  this.renderer.render(this.sketch, this.camera);
   this.stats.end();
 }
 
@@ -201,16 +201,16 @@ async function addSketch() {
     }
   }
 
-  const sketcher = new Sketcher(this.camera, this.canvas, this.store, nid++)
+  const sketcher = new Sketcher(this.camera, this.canvas, this.store)
 
   if (references.length == 1 && references[0].name[0] == 'd') {
-    this.add(sketcher)
+    this.sketch.add(sketcher.sketch)
-    sketcher.matrix = references[0].matrix
+    sketcher.sketch.matrix = references[0].matrix
-    sketcher.plane.applyMatrix4(sketcher.matrix)
+    sketcher.plane.applyMatrix4(sketcher.sketch.matrix)
-    sketcher.inverse = sketcher.matrix.clone().invert()
+    sketcher.sketch.inverse = sketcher.sketch.matrix.clone().invert()
 
   } else if (references.length == 3) {
-    this.add(sketcher)
+    this.sketch.add(sketcher.sketch)
     sketcher.align(
       ...references.map(
         el => new Vector3(...el.geometry.attributes.position.array).applyMatrix4(el.matrixWorld)
@@ -223,7 +223,7 @@ async function addSketch() {
   }
 
   sketcher.activate()
-  sketcher.addEventListener('change', this.render);
+  sketcher.sketch.addEventListener('change', this.render);
   this.render()
   this.store.dispatch({ type: 'rx-sketch', obj: sketcher })
 

src/app.jsx

@@ -14,10 +14,6 @@ export const Root = ({ store }) => (
 
 
 
-function treeId2Obj(id) {
-  // return sc.scene.getObjectById(parseInt(id.slice(1)))
-  return sc.getObjectByName(id)
-}
 
 const App = () => {
   const dispatch = useDispatch()
@@ -44,24 +40,23 @@ const App = () => {
 
     <div className='buttons-group'>
       {activeSketch ?
-        <button onClick={() => treeId2Obj(activeSketch).deactivate()}>
+        <button onClick={() => activeSketch.deactivate()}>
           Exit sketch
         </button> :
         <button onClick={sc.addSketch}> addsketch </button>
       }
-      <button onClick={() => sc.extrude(treeId2Obj(activeSketch))}> extrude </button>
+      <button onClick={() => sc.extrude(activeSketch)}> extrude </button>
       {/* <button onClick={() => setState('')}> test </button> */}
     </div>
 
     <div className='feature-tree'>
-      {treeEntries.map((entId, idx) => (
+      { treeEntries.allIds.map((entId, idx) => (
         <div key={idx}
           onClick={() => {
-            console.log('here',treeId2Obj(entId))
             if (activeSketch) {
-              treeId2Obj(activeSketch).deactivate()
+              activeSketch.deactivate()
             }
-            treeId2Obj(entId).activate()
+            treeEntries.byId[entId].activate()
           }
           }
         >{entId}</div>

src/datums.js

@@ -22,7 +22,7 @@ export function add3DPoint(e) {
     this.camera
   );
 
-  // const hoverPts = this.raycaster.intersectObjects(this.scene.children)
+  // const hoverPts = this.raycaster.intersectObjects(this.sketch.children)
   const hoverPts = this.raycaster.intersectObjects(this.sketcher.children)
 
   console.log(hoverPts)

src/extrude.js

@@ -4,12 +4,14 @@ export function extrude(sketch) {
 
   let constraints = sketch.constraints;
   let linkedObjs = sketch.linkedObjs;
-  let children = sketch.children;
+  let children = sketch.sketch.children;
   let objIdx = sketch.objIdx;
   let visited = new Set()
   let v2s = []
   let offSetPts = []
   
+
+
   function findPair(node) {
     visited.add(node)
     let linkedObj = linkedObjs.get(node.userData.l_id)
@@ -87,8 +89,8 @@ export function extrude(sketch) {
 
 
   mesh.matrixAutoUpdate = false;
-  mesh.matrix.multiply(sketch.matrix)
+  mesh.matrix.multiply(sketch.sketch.matrix)
-  this.add(mesh)
+  this.sketch.add(mesh)
 
 
   this.render()

src/index.js

@@ -11,16 +11,17 @@ let _entId = 0
 
 function reducer(state = {}, action) {
   switch (action.type) {
-    case 'toggle':
-      return { ...state, toggle: action.payload }
     case 'rx-sketch':
       return {
-        ...state, treeEntries: [...state.treeEntries, action.obj.name]
+        ...state,
-        ,
+        treeEntries: {
+          byId: { ...state.treeEntries.byId, [action.obj.sketch.name]: action.obj },
+          allIds: [...state.treeEntries.allIds, action.obj.sketch.name]
+        }
       }
     case 'set-active-sketch':
       return {
-        ...state, activeSketch: action.sketch.name
+        ...state, activeSketch: action.sketch
       }
     case 'exit-sketch':
       return {
@@ -29,11 +30,13 @@ function reducer(state = {}, action) {
     case 'rx-extrusion':
       return {
         ...state,
-        treeEntries: [...state.treeEntries, action.mesh.name]
+        treeEntries: {
-        ,
+          byId: { ...state.treeEntries.byId, [action.mesh.name]: action.mesh },
+          allIds: [...state.treeEntries.allIds, action.mesh.name]
+        },
         mesh2sketch: {
           ...state.mesh2sketch,
-          [action.sketch.name]: action.mesh.name
+          [action.sketch.sketch.name]: action.mesh.name
         }
       }
     case 'restore-state':
@@ -47,10 +50,10 @@ function reducer(state = {}, action) {
 
 
 const preloadedState = {
-  treeEntries: [
+  treeEntries: {
-    // 's1','m1'
+    byId: {},
-  ]
+    allIds: []
-  ,
+  }
 }
 
 

src/sketcher/Sketcher.js

@@ -12,28 +12,32 @@ import { replacer, reviver } from '../utils/mapJSONReplacer'
 
 
 
-class Sketcher extends THREE.Group {
+class Sketcher {
 
 
-  constructor(camera, canvas, store, nid) {
+  constructor(camera, canvas, store, sketch) {
-    super()
+
-    this.name = "s" + nid
+    if (sketch === undefined) {
-    this.matrixAutoUpdate = false;
+      this.sketch = new THREE.Group()
+      this.sketch.name = "s" + nid++
+      this.sketch.matrixAutoUpdate = false;
+    } else {
+      this.sketch = sketch
+    }
+
     this.camera = camera;
     this.canvas = canvas;
     this.store = store;
 
     this.sub = new THREE.Group();
-    this.add(this.sub);
+    this.sketch.add(this.sub);
     const axesHelper = new THREE.AxesHelper(2);
     this.sub.add(axesHelper);
 
 
-
     this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
 
 
-
     // [0]:x, [1]:y, [2]:z
     this.objIdx = new Map()
     this.ptsBuf = new Float32Array(this.max_pts * 3).fill(NaN)
@@ -99,16 +103,16 @@ class Sketcher extends THREE.Group {
     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);
+    this.sketch.quaternion.setFromRotationMatrix(_m1);
-    const parent = this.parent;
+    const parent = this.sketch.parent;
     _m1.extractRotation(parent.matrixWorld);
     _q1.setFromRotationMatrix(_m1);
-    this.quaternion.premultiply(_q1.invert());
+    this.sketch.quaternion.premultiply(_q1.invert());
-    this.updateMatrix();
+    this.sketch.updateMatrix();
-    this.matrix.setPosition(origin)
+    this.sketch.matrix.setPosition(origin)
 
-    this.plane.applyMatrix4(this.matrix)
+    this.plane.applyMatrix4(this.sketch.matrix)
-    this.inverse = this.matrix.clone().invert()
+    this.sketch.inverse = this.sketch.matrix.clone().invert()
   }
 
 
@@ -169,7 +173,7 @@ class Sketcher extends THREE.Group {
     this.updateOtherBuffers()
 
     this.selected = []
-    this.dispatchEvent({ type: 'change' })
+    this.sketch.dispatchEvent({ type: 'change' })
   }
 
   delete(obj) {
@@ -180,7 +184,7 @@ class Sketcher extends THREE.Group {
     let i = this.objIdx.get(link[0]) || this.updatePoint // hacky, see drawEvent.js for updatePoint def
 
     for (let j = 0; j < link.length; j++) {
-      const obj = this.children[i + j]
+      const obj = this.sketch.children[i + j]
       obj.geometry.dispose()
       obj.material.dispose()
 
@@ -189,7 +193,7 @@ class Sketcher extends THREE.Group {
       }
     }
 
-    this.children.splice(i, link.length)
+    this.sketch.children.splice(i, link.length)
 
     this.linkedObjs.delete(obj.userData.l_id)
 
@@ -200,7 +204,7 @@ class Sketcher extends THREE.Group {
   deleteConstraints(c_id) {
     for (let idx of this.constraints.get(c_id)[2]) { //////////
       if (idx == -1) continue
-      const ob = this.children[this.objIdx.get(idx)]
+      const ob = this.sketch.children[this.objIdx.get(idx)]
       if (ob) {
         // ob.constraints.delete(c_id)
         ob.userData.constraints.splice(ob.userData.constraints.indexOf(c_id), 1)
@@ -238,8 +242,8 @@ class Sketcher extends THREE.Group {
 
 
   updatePointsBuffer(startingIdx = 0) {
-    for (let i = startingIdx; i < this.children.length; i++) {
+    for (let i = startingIdx; i < this.sketch.children.length; i++) {
-      const obj = this.children[i]
+      const obj = this.sketch.children[i]
       this.objIdx.set(obj.name, i)
       if (obj.type == "Points") {
         this.ptsBuf.set(obj.geometry.attributes.position.array, 3 * i)
@@ -256,7 +260,7 @@ class Sketcher extends THREE.Group {
       this.camera
     );
 
-    raycaster.ray.intersectPlane(this.plane, _vec3).applyMatrix4(this.inverse)
+    raycaster.ray.intersectPlane(this.plane, _vec3).applyMatrix4(this.sketch.inverse)
 
     return _vec3.toArray()
   }
@@ -276,7 +280,7 @@ class Sketcher extends THREE.Group {
     Module.HEAPF32.set(this.linksBuf, links_buffer >> 2)
 
     Module["_solver"](
-      this.children.length, pts_buffer,
+      this.sketch.children.length, pts_buffer,
       this.constraints.size, constraints_buffer,
       this.linkedObjs.size, links_buffer)
 
@@ -286,9 +290,9 @@ class Sketcher extends THREE.Group {
     - 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 = 1, ptr = (pts_buffer >> 2) + 3; i < this.sketch.children.length; i += 1, ptr += 3) {
 
-      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]
@@ -312,7 +316,7 @@ class Sketcher extends THREE.Group {
     */
     for (let [k, obj] of this.linkedObjs) {
       if (obj[0] != 'arc') continue;
-      const [p1, p2, c, arc] = obj[1].map(e => this.children[this.objIdx.get(e)])
+      const [p1, p2, c, arc] = obj[1].map(e => this.sketch.children[this.objIdx.get(e)])
 
       const points = get3PtArc(
         p1.geometry.attributes.position.array,
@@ -325,14 +329,16 @@ class Sketcher extends THREE.Group {
     }
 
 
-    this.dispatchEvent({ type: 'change' })
+    this.sketch.dispatchEvent({ type: 'change' })
   }
 
   toJSON() {
     this.userData = {
       constraints: JSON.stringify(this.constraints, replacer),
       linkedObjs: JSON.stringify(this.linkedObjs, replacer),
-      objIdx: JSON.stringify(this.objIdx, replacer)
+      objIdx: JSON.stringify(this.objIdx, replacer),
+      c_id: this.c_id,
+      l_id: this.l_id
     }
     return super.toJSON()
   }

src/sketcher/constraintEvents.js

@@ -48,5 +48,5 @@ export function setCoincident() {
     obj.material.color.set(0x555555)
   }
   this.selected = []
-  this.dispatchEvent({ type: 'change' })
+  this.sketch.dispatchEvent({ type: 'change' })
 }

src/sketcher/drawEvents.js

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

src/sketcher/sketchLine.js

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

src/utils/mouseEvents.js

@@ -13,10 +13,10 @@ export function onHover(e) {
   );
 
   let hoverPts;
-  if (this.name[0]=='s') {
+  if (this.sketch.name[0]=='s') {
-    hoverPts = raycaster.intersectObjects(this.children)
+    hoverPts = raycaster.intersectObjects(this.sketch.children)
   } else {
-    hoverPts = raycaster.intersectObjects(this.children, true)
+    hoverPts = raycaster.intersectObjects(this.sketch.children, true)
   }
 
   let idx = []
@@ -51,7 +51,7 @@ export function onHover(e) {
       this.hovered[this.hovered.length - 1].material.color.set(color.hover)
 
       // console.log('render1')
-      this.dispatchEvent({ type: 'change' })
+      this.sketch.dispatchEvent({ type: 'change' })
     }
   } else {
     if (this.hovered.length) {
@@ -63,7 +63,7 @@ export function onHover(e) {
       this.hovered = []
 
       // console.log('render2')
-      this.dispatchEvent({ type: 'change' })
+      this.sketch.dispatchEvent({ type: 'change' })
     }
   }
 }
@@ -85,7 +85,7 @@ export function onPick(e) {
       // obj.material.color.set(0x555555)
       obj.material.color.set(color[obj.name[0]])
     }
-    this.dispatchEvent({ type: 'change' })
+    this.sketch.dispatchEvent({ type: 'change' })
     this.selected = []
   }
 }
@@ -102,7 +102,7 @@ export function onDrag(e) {
   }
 
   this.solve()
-  this.dispatchEvent({ type: 'change' })
+  this.sketch.dispatchEvent({ type: 'change' })
 }