working extrude

src/index.js

@@ -1,62 +1,30 @@
-// class MinMaxGUIHelper {
-//   constructor(obj, minProp, maxProp, minDif) {
-//     this.obj = obj;
-//     this.minProp = minProp;
-//     this.maxProp = maxProp;
-//     this.minDif = minDif;
-//   }
-//   get min() {
-//     return this.obj[this.minProp];
-//   }
-//   set min(v) {
-//     this.obj[this.minProp] = v;
-//     this.obj[this.maxProp] = Math.max(this.obj[this.maxProp], v + this.minDif);
-//   }
-//   get max() {
-//     return this.obj[this.maxProp];
-//   }
-//   set max(v) {
-//     this.obj[this.maxProp] = v;
-//     this.min = this.min;  // this will call the min setter
-//   }
-// }
 
-// const gui = new GUI();
-// gui.add(camera, 'zoom', 0.01, 1, 0.01).listen();
-// const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
-// gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near');
-// gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far');
 
 import * as THREE from '../node_modules/three/src/Three';
 import { OrbitControls } from './OrbitControls'
 import { TrackballControls } from './trackball'
 import { Sketcher } from './sketcher/Sketcher'
-import GUI from '../node_modules/dat.gui/src/dat/gui/GUI.js'
 import Stats from '../node_modules/three/examples/jsm/libs/stats.module.js';
 
-import { KeyboardController } from './utils'
 
 
 
 function main() {
 
-
   var stats = new Stats();
   stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
   document.body.appendChild(stats.dom);
 
   const canvas = document.querySelector('#c');
-  const view1Elem = document.querySelector('#view1');
-  // const view2Elem = document.querySelector('#view2');
   const renderer = new THREE.WebGLRenderer({ canvas });
 
   const scene = new THREE.Scene();
-  window.scene = scene;
+  scene.background = new THREE.Color(0xb0b0b0);
-  scene.background = new THREE.Color('pink');
 
   const helpersGroup = new THREE.Group();
   scene.add(helpersGroup);
-
+  const axesHelper = new THREE.AxesHelper(5);
+  helpersGroup.add(axesHelper);
 
   const size = 1;
   const near = 5;
@@ -64,65 +32,32 @@ function main() {
   const camera = new THREE.OrthographicCamera(-size, size, size, -size, near, far);
   camera.zoom = 0.1;
   camera.position.set(0, 0, 20);
-  const controls = new OrbitControls(camera, view1Elem);
+
-  // const controls = new TrackballControls(camera, view1Elem);
+  // const controls = new OrbitControls(camera, view1Elem);
+  const controls = new TrackballControls(camera, canvas);
   controls.target.set(0, 0, 0);
   controls.update()
-  // const cameraHelper = new THREE.CameraHelper(camera);
-  // helpersGroup.add(cameraHelper);
 
 
-  // const camera2 = new THREE.PerspectiveCamera(
-  //   60,  // fov
-  //   2,   // aspect
-  //   0.1, // near
-  //   500, // far
-  // );
-
-  // const c2size = 10;
-  // const c2near = 5;
-  // const c2far = 200;
-  // const camera2 = new THREE.OrthographicCamera(-c2size, c2size, c2size, -c2size, c2near, c2far);
-  // camera2.zoom = 0.5
-
-  // camera2.position.set(16, 28, 40);
-  // camera2.lookAt(0, 5, 0);
-  // const controls2 = new OrbitControls(camera2, view2Elem);
-  // controls2.target.set(0, 5, 0);
-  // controls2.update();
-
-
-
-  const axesHelper = new THREE.AxesHelper(5);
-  helpersGroup.add(axesHelper);
-
-  const sketchPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
-  const sketcher = new Sketcher(camera, view1Elem, sketchPlane)
-  window.sketcher = sketcher
-  scene.add(sketcher)
-
 
   const color = 0xFFFFFF;
   const intensity = 1;
-
   const light1 = new THREE.DirectionalLight(color, intensity);
   light1.position.set(10, 10, 10);
   scene.add(light1);
-  // const lightHelper = new THREE.DirectionalLightHelper(light1, 5);
-  // helpersGroup.add(lightHelper);
 
   const light2 = new THREE.DirectionalLight(color, intensity);
   light2.position.set(-10, -10, -5);
   scene.add(light2);
-  // const lightHelper2 = new THREE.DirectionalLightHelper(light2, 5);
-  // helpersGroup.add(lightHelper2);
 
-  {
+  const ambient = new THREE.AmbientLight(color, intensity);
-    const color = 0xFFFFFF;
+  scene.add(ambient);
-    const intensity = 1;
+
-    const light = new THREE.AmbientLight(color, intensity);
+
-    scene.add(light);
+  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) {
@@ -136,67 +71,19 @@ function main() {
     return needResize;
   }
 
-  function setScissorForElement(elem) {
-    const canvasRect = canvas.getBoundingClientRect();
-    const elemRect = elem.getBoundingClientRect();
-
-    // compute a canvas relative rectangle
-    const right = Math.min(elemRect.right, canvasRect.right) - canvasRect.left;
-    const left = Math.max(0, elemRect.left - canvasRect.left);
-    const bottom = Math.min(elemRect.bottom, canvasRect.bottom) - canvasRect.top;
-    const top = Math.max(0, elemRect.top - canvasRect.top);
-
-    const width = Math.min(canvasRect.width, right - left);
-    const height = Math.min(canvasRect.height, bottom - top);
-
-    // setup the scissor to only render to that part of the canvas
-    const positiveYUpBottom = canvasRect.height - bottom;
-    renderer.setScissor(left, positiveYUpBottom, width, height);
-    renderer.setViewport(left, positiveYUpBottom, width, height);
-
-    // return the aspect
-    return width / height;
-  }
-
   function render() {
     stats.begin();
-    resizeRendererToDisplaySize(renderer);
+    if (resizeRendererToDisplaySize(renderer)) {
-
+      const canvas = renderer.domElement;
-    renderer.setScissorTest(true);
+      camera.left = -canvas.clientWidth / canvas.clientHeight;
-    {
+      camera.right = canvas.clientWidth / canvas.clientHeight;
-      const aspect = setScissorForElement(view1Elem);
-      camera.left = -aspect;
-      camera.right = aspect;
       camera.updateProjectionMatrix();
-      // cameraHelper.update();
-      // cameraHelper.visible = false;
-      // lightHelper.visible = false;
-      // lightHelper2.visible = false;
-
-      scene.background.set(0xb0b0b0);
-      renderer.render(scene, camera);
     }
-    // {
+    renderer.render(scene, camera);
-    //   const aspect = setScissorForElement(view2Elem);
-    //   camera2.aspect = aspect;
-    //   camera2.updateProjectionMatrix();
-    //   cameraHelper.visible = true;
-    //   lightHelper.visible = true;
-    //   lightHelper2.visible = true;
-    //   scene.background.set(0x000040);
-    //   renderer.render(scene, camera2);
-    // }
-
     stats.end();
-
-    // requestAnimationFrame(render);
   }
-  // requestAnimationFrame(render);
-
-
   controls.addEventListener('change', render);
   controls.addEventListener('start', render);
-  // controls2.addEventListener('change', render);
   sketcher.addEventListener('change', render);
   window.addEventListener('resize', render);
   render();

src/sketcher/pickEvents copy.js

@@ -0,0 +1,101 @@
+import * as THREE from 'three/src/Three'
+
+export function onHover(e) {
+  if (this.mode || e.buttons) return
+
+  if (this.hovered.length) {
+    for (let ob of this.hovered) {
+      if (ob && !this.selected.has(ob)) {
+        ob.material.color.set(0x555555)
+      }
+    }
+    this.hovered = []
+    // this.dispatchEvent({ type: 'change' })
+  }
+
+  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.children)
+
+  // console.log(hoverPts)
+  if (hoverPts.length) {
+    let minDist = Infinity;
+    let idx = []
+    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)
+
+    for (let i of idx) {
+      hoverPts[i].object.material.color.set(0x00ff00)
+      // hoverPts[i].object.material.color.set(0xff0000)
+      this.hovered.push(hoverPts[i].object)
+    }
+    this.dispatchEvent({ type: 'change' })
+    return
+  }
+
+}
+
+
+export function onPick(e) {
+  if (this.mode || e.buttons != 1) return
+
+  if (this.hovered.length) {
+
+    for (let h of this.hovered) {
+      this.selected.add(h)
+    }
+
+    if (this.hovered[0].type == "Points") {
+      this.domElement.addEventListener('pointermove', this.onDrag);
+      this.domElement.addEventListener('pointerup', this.onRelease)
+    }
+  } else {
+    for (let obj of this.selected) {
+      obj.material.color.set(0x555555)
+    }
+    this.dispatchEvent({ type: 'change' })
+    this.selected.clear()
+  }
+}
+
+export function onDrag(e) {
+  const mouseLoc = this.getLocation(e);
+
+  for (let h of this.hovered) {
+    this.ptsBuf.set(
+      mouseLoc,
+      this.objIdx.get(h.id) * 3
+    )
+  }
+
+  this.solve()
+  this.dispatchEvent({ type: 'change' })
+}
+
+
+export function onRelease() {
+  this.domElement.removeEventListener('pointermove', this.onDrag)
+  this.domElement.removeEventListener('pointerup', this.onRelease)
+
+  for (let ii of this.hovered) {
+    ii.geometry.computeBoundingSphere()
+  }
+
+}
+

src/sketcher/pickEvents.js

@@ -10,7 +10,7 @@ export function onHover(e) {
       }
     }
     this.hovered = []
-    this.dispatchEvent({ type: 'change' })
+    // this.dispatchEvent({ type: 'change' })
   }
 
   this.raycaster.setFromCamera(