work on modularization and abstracting out visualization layer(three.js).

modules/dpr/index.js

@@ -0,0 +1 @@
+export default ((window.devicePixelRatio) ? window.devicePixelRatio : 1);

modules/scene/materails.js

@@ -0,0 +1,16 @@
+import {MeshPhongMaterial, FaceColors, DoubleSide} from 'three';
+
+export function createTransparentPhongMaterial(color, opacity) {
+  return new MeshPhongMaterial({
+    vertexColors: FaceColors,
+    color,
+    transparent: true,
+    opacity: opacity,
+    shininess: 0,
+    depthWrite: false,
+    depthTest: false,
+    side : DoubleSide
+  });
+}
+
+

modules/scene/materialMixins.js

@@ -0,0 +1,6 @@
+
+export const OnTopOfAll = {
+  depthWrite: false,
+  depthTest: false,
+  renderOrder: 1e11
+};

modules/scene/objects/auxiliary.js

@@ -0,0 +1,19 @@
+import DPR from 'dpr';
+import {ArrowHelper, Vector3} from 'three';
+
+export function createArrow(length, arrowLength, arrowHead, axis, color, opacity, materialMixins) {
+  let arrow = new ArrowHelper(new Vector3().copy(axis), new Vector3(0, 0, 0), length, color, arrowLength, arrowHead);
+  arrow.updateMatrix();
+  arrow.line.material.linewidth =  1/DPR;
+  if (opacity !== undefined) {
+    arrow.line.material.opacity = opacity;
+    arrow.line.material.transparent = true;
+    arrow.cone.material.opacity = opacity;
+    arrow.cone.material.transparent = true;
+  }
+  if (materialMixins !== undefined) {
+    Object.assign(arrow.line.material, ...materialMixins);
+    Object.assign(arrow.cone.material, ...materialMixins);
+  }
+  return arrow;
+}

modules/scene/objects/transform.js

@@ -0,0 +1,14 @@
+
+export function setBasisToObject3D(obj, basis, depth) {
+  obj.matrix.identity();
+  let mx = new THREE.Matrix4();
+  mx.makeBasis(basis[0].three(), basis[1].three(), basis[2].three());
+  let depthOff = new THREE.Vector3(0, 0, depth);
+  depthOff.applyMatrix4(mx);
+  mx.setPosition(depthOff);
+  obj.applyMatrix(mx);
+}
+
+export function moveObject3D(obj, dir) {
+  obj.position.add(dir)
+}

modules/scene/pickControl.js

@@ -0,0 +1,32 @@
+export default function initPickControl(domElement, onPick) {
+  let mouseState = {
+    startX: 0,
+    startY: 0
+  };
+
+  //fix for FireFox
+  function fixOffsetAPI(event) {
+    if (event.offsetX === undefined) {
+      event.offsetX = event.layerX;
+      event.offsetY = event.layerY;
+    }
+  }
+
+  domElement.addEventListener('mousedown',
+    function (e) {
+      fixOffsetAPI(e);
+      mouseState.startX = e.offsetX;
+      mouseState.startY = e.offsetY;
+    }, false);
+
+  domElement.addEventListener('mouseup',
+    function (e) {
+      fixOffsetAPI(e);
+      let dx = Math.abs(mouseState.startX - e.offsetX);
+      let dy = Math.abs(mouseState.startY - e.offsetY);
+      let TOL = 1;
+      if (dx < TOL && dy < TOL) {
+        onPick(e);
+      }
+    }, false);
+}

modules/scene/sceneGraph.js

@@ -0,0 +1,15 @@
+
+export function addToGroup(group, child) {
+  group.add(child);
+}
+
+export function removeFromGroup(group, child) {
+  group.remove(child);
+}
+
+export function createGroup() {
+  return new THREE.Object3D();
+}
+
+ 
+

modules/scene/sceneSetup.js

@@ -0,0 +1,131 @@
+import DPR from 'dpr';
+
+export default class SceneSetUp{
+  
+  constructor(container) {
+    
+    this.container = container;
+    this.scene = new THREE.Scene();
+    this.rootGroup = this.scene;
+
+    this.setUpCamerasAndLights();
+    this.setUpControls();
+
+    this.animate();
+  }
+
+  aspect() {
+    return this.container.clientWidth / this.container.clientHeight;
+  }
+
+  setUpCamerasAndLights() {
+    this.camera = new THREE.PerspectiveCamera( 500*75, this.aspect(), 0.1, 10000 );
+    this.camera.position.z = 1000;
+    this.camera.position.x = -1000;
+    this.camera.position.y = 300;
+
+    this.light = new THREE.PointLight( 0xffffff);
+    this.light.position.set( 10, 10, 10 );
+    this.scene.add(this.light);
+
+    this.renderer = new THREE.WebGLRenderer();
+    this.renderer.setPixelRatio(DPR);
+    this.renderer.setClearColor(0x808080, 1);
+    this.renderer.setSize( this.container.clientWidth, this.container.clientHeight );
+    this.container.appendChild( this.renderer.domElement );
+
+    window.addEventListener( 'resize', () => {
+      this.camera.aspect = this.aspect();
+      this.camera.updateProjectionMatrix();
+      this.renderer.setSize( this.container.clientWidth, this.container.clientHeight );
+      this.render();
+    }, false );
+  }
+
+  setUpControls() {
+    //  controls = new THREE.OrbitControls( camera , renderer.domElement);
+    let trackballControls = new THREE.TrackballControls(this.camera , this.renderer.domElement);
+
+    // document.addEventListener( 'mousemove', function(){
+
+    //   controls.update();
+
+    // }, false );
+    trackballControls.rotateSpeed = 3.8;
+    trackballControls.zoomSpeed = 1.2;
+    trackballControls.panSpeed = 0.8;
+
+    trackballControls.noZoom = false;
+    trackballControls.noPan = false;
+
+    trackballControls.staticMoving = true;
+    trackballControls.dynamicDampingFactor = 0.3;
+
+    trackballControls.keys = [ 65, 83, 68 ];
+    trackballControls.addEventListener( 'change', () => this.render());
+
+    let transformControls = new THREE.TransformControls( this.camera, this.renderer.domElement );
+    transformControls.addEventListener( 'change', () => this.render() );
+    this.scene.add( transformControls );
+    
+    this.trackballControls = trackballControls;
+    this.transformControls = transformControls;
+
+    let updateTransformControls = () => {
+      if (transformControls.object !== undefined) {
+        if (transformControls.object.parent === undefined) {
+          transformControls.detach();
+          this.render();
+        }
+        transformControls.update();
+      }
+    };
+
+    this.updateControlsAndHelpers = function() {
+      trackballControls.update();
+      updateTransformControls();
+    };
+  }
+
+  raycast(event, group) {
+    let raycaster = new THREE.Raycaster();
+    raycaster.linePrecision = 12 * (this._zoomMeasure() * 0.8);
+    let x = ( event.offsetX / this.container.clientWidth ) * 2 - 1;
+    let y = - ( event.offsetY / this.container.clientHeight ) * 2 + 1;
+
+    let mouse = new THREE.Vector3( x, y, 1 );
+    raycaster.setFromCamera( mouse, this.camera );
+    return raycaster.intersectObjects( group.children, true );
+  }
+
+  lookAt(obj) {
+    let box = new THREE.Box3();
+    box.setFromObject(obj);
+    let size = box.size();
+    //this.camera.position.set(0,0,0);
+    box.center(this.camera.position);
+    const maxSize = Math.max(size.x, size.z);
+    const dist = maxSize / 2 / Math.tan(Math.PI * this.camera.fov / 360);
+    this.camera.position.addScaledVector(this.camera.position.normalize(), 5000);
+    //this.camera.position.sub(new THREE.Vector3(0, 0, dist));
+    this.camera.up = new THREE.Vector3(0, 1, 0);
+  }
+
+  _zoomMeasure() {
+    return this.trackballControls.object.position.length() / 1e3;
+  }
+  
+  animate() {
+    requestAnimationFrame( () => this.animate() );
+    this.updateControlsAndHelpers();
+  };
+
+  render() {
+    this.light.position.set(this.camera.position.x, this.camera.position.y, this.camera.position.z);
+    this.renderer.render(this.scene, this.camera);
+  };
+
+  domElement() {
+    return this.renderer.domElement;   
+  }
+}

web/app/3d/scene/brep-scene-object.js

@@ -74,7 +74,7 @@ class BREPSceneFace extends SceneFace {
   }
 
   depth() {
-    return this.brepFace.surface.w;
+    return this.brepFace.surface.tangentPlaneInMiddle().w;
   }
 
   surface() {

web/app/3d/viewer.js

@@ -1,276 +1,139 @@
-import * as cad_utils from './cad-utils'
-import {Matrix3, AXIS, ORIGIN} from '../math/l3space'
-import DPR from '../utils/dpr'
+import {AXIS} from '../math/l3space'
+import DPR from 'dpr'
 import * as mask from '../utils/mask';
-import {SelectionManager, SketchSelectionManager, EdgeSelectionManager} from './selection'
+import {EdgeSelectionManager, SelectionManager, SketchSelectionManager} from './selection'
+import {createArrow} from 'scene/objects/auxiliary';
+import Vector from 'math/vector';
+import {OnTopOfAll} from 'scene/materialMixins';
+import SceneSetup from 'scene/sceneSetup';
+import * as SceneGraph from 'scene/sceneGraph';
+import initPickControl from "scene/pickControl";
+import {moveObject3D, setBasisToObject3D} from "../../../modules/scene/objects/transform";
 
-function Viewer(bus, container) {
+export class Viewer {
+  
+  constructor(bus, container) {
     this.bus = bus;
-  this.container = container;
-  function aspect() {
-    return container.clientWidth / container.clientHeight;
-  }
-  this.scene = new THREE.Scene();
-  var scene = this.scene;
-  this.camera = new THREE.PerspectiveCamera( 500*75, aspect(), 0.1, 10000 );
-  this.camera.position.z = 1000;
-  this.camera.position.x = -1000;
-  this.camera.position.y = 300;
-  var light = new THREE.PointLight( 0xffffff);
-  light.position.set( 10, 10, 10 );
-  scene.add(light);
+    this.sceneSetup = new SceneSetup(container);
+    initPickControl(this.sceneSetup.domElement(), this.onPick);
 
-  this.renderer = new THREE.WebGLRenderer();
-  this.renderer.setPixelRatio(DPR);
-  this.renderer.setClearColor(0x808080, 1);
-  this.renderer.setSize( container.clientWidth, container.clientHeight );
-  container.appendChild( this.renderer.domElement );
+    this.workGroup = SceneGraph.createGroup();
+    this.auxGroup = SceneGraph.createGroup();
+    SceneGraph.addToGroup(this.sceneSetup.rootGroup, this.workGroup);
+    SceneGraph.addToGroup(this.sceneSetup.rootGroup, this.auxGroup);
 
-  this.render = function() {
-    light.position.set(this.camera.position.x, this.camera.position.y, this.camera.position.z);
-    this.renderer.render(scene, this.camera);
-  };
+    this.setUpAxises();
+    this.setUpBasisGroup();
+    this.setUpSelectionManager();
 
-  window.addEventListener( 'resize', () => {
-    this.camera.aspect = aspect();
-    this.camera.updateProjectionMatrix();
-    this.renderer.setSize( container.clientWidth, container.clientHeight );
-    this.render();
-  }, false );
-
-//  controls = new THREE.OrbitControls( camera , renderer.domElement);
-  var trackballControls = new THREE.TrackballControls(this.camera , this.renderer.domElement);
-
-  // document.addEventListener( 'mousemove', function(){
-
-  //   controls.update();
-
-  // }, false );
-  trackballControls.rotateSpeed = 3.8;
-  trackballControls.zoomSpeed = 1.2;
-  trackballControls.panSpeed = 0.8;
-
-  trackballControls.noZoom = false;
-  trackballControls.noPan = false;
-
-  trackballControls.staticMoving = true;
-  trackballControls.dynamicDampingFactor = 0.3;
-
-  trackballControls.keys = [ 65, 83, 68 ];
-  trackballControls.addEventListener( 'change', () => this.render());
-  this.trackballControls = trackballControls;
-
-  var transformControls = new THREE.TransformControls( this.camera, this.renderer.domElement );
-  transformControls.addEventListener( 'change', () => this.render() );
-  scene.add( transformControls );
-  this.transformControls = transformControls;
-
-  this.updateTransformControls = function() {
-    if (transformControls.object !== undefined) {
-      if (transformControls.object.parent === undefined) {
-        transformControls.detach();
     this.render();
   }
-      transformControls.update();
-    }
-  };
   
+  render() {
+    this.sceneSetup.render();  
+  }
+
+  setUpAxises() {
     let arrowLength = 1500;
     let createAxisArrow = createArrow.bind(null, arrowLength, 40, 16);
-  function addAxis(axis, color) {
-    let arrow = createAxisArrow(axis, color);
-    arrow.position.add( new THREE.Vector3().copy(axis).multiplyScalar(- arrowLength * 0.5) )
-    scene.add(arrow);
-  }
+    let addAxis = (axis, color) => {
+      let arrow = createAxisArrow(axis, color, 0.2);
+      moveObject3D(arrow, axis.scale(-arrowLength * 0.5));
+      SceneGraph.addToGroup(this.auxGroup, arrow);
+    };
 
     addAxis(AXIS.X, 0xFF0000);
     addAxis(AXIS.Y, 0x00FF00);
     addAxis(AXIS.Z, 0x0000FF);
+  }
 
-  this.updateControlsAndHelpers = function() {
-    trackballControls.update();
-    this.updateTransformControls();
-  };
-
-  this.workGroup = new THREE.Object3D();
-  this.scene.add(this.workGroup);
-  this.createBasisGroup();
+  setUpSelectionManager() {
     this.selectionMgr = new SelectionManager(this, 0xFAFAD2, 0xFF0000, null);
-  this.sketchSelectionMgr = new SketchSelectionManager( this, new THREE.LineBasicMaterial({color: 0xFF0000, linewidth: 6/DPR}));
-  this.edgeSelectionMgr = new EdgeSelectionManager( this, new THREE.LineBasicMaterial({color: 0xFA8072, linewidth: 12/DPR}));
-  var viewer = this;
-
-  var raycaster = new THREE.Raycaster();
-  
-  this.raycast = function(event) {
-    raycaster.linePrecision = 12 * (this.zoomMeasure() * 0.8);
-    var x = ( event.offsetX / container.clientWidth ) * 2 - 1;
-    var y = - ( event.offsetY / container.clientHeight ) * 2 + 1;
-
-    var mouse = new THREE.Vector3( x, y, 1 );
-    raycaster.setFromCamera( mouse, this.camera );
-    return raycaster.intersectObjects( viewer.workGroup.children, true );
-  };
-  
-  function onClick(e) {
-    if (e.button != 0) {
-      viewer.handleSolidPick(e);
-    } else {
-      viewer.handlePick(e);
-    }
+    this.sketchSelectionMgr = new SketchSelectionManager(this, new THREE.LineBasicMaterial({
+      color: 0xFF0000,
+      linewidth: 6 / DPR
+    }));
+    this.edgeSelectionMgr = new EdgeSelectionManager(this, new THREE.LineBasicMaterial({
+      color: 0xFA8072,
+      linewidth: 12 / DPR
+    }));
   }
 
-  var mouseState = {
-    startX : 0,
-    startY : 0
-  };
-
-  //fix for FireFox
-  function fixOffsetAPI(event) {
-    if (event.offsetX == undefined) {
-      event.offsetX = event.layerX;
-      event.offsetY = event.layerY;
-    }
-  }
-  
-  this.renderer.domElement.addEventListener('mousedown',
-    function(e) {
-      fixOffsetAPI(e);
-      mouseState.startX = e.offsetX;
-      mouseState.startY = e.offsetY;
-    }, false);
-
-  this.renderer.domElement.addEventListener('mouseup',
-    function(e) {
-      fixOffsetAPI(e);
-      var dx = Math.abs(mouseState.startX - e.offsetX);
-      var dy = Math.abs(mouseState.startY - e.offsetY);
-      var TOL = 1;
-      if (dx < TOL && dy < TOL) {
-        onClick(e);
-      }
-    } , false);
-
-
-  this.animate = function() {
-    requestAnimationFrame( () => this.animate() );
-    this.updateControlsAndHelpers();
-  };
-
-  this.render();
-  this.animate();
-}
-
-Viewer.prototype.updateZoomLineThickness = function() {
-  this.workGroup.traverse (object =>
-  {
-    if (object instanceof THREE.Mesh && object.__TCAD_EDGE) {
-      const zoomMeasure = this.zoomMeasure();
-      object.scale.set(zoomMeasure, zoomMeasure, object.scale.z);
-    }
-  });
-};
-
-Viewer.prototype.zoomMeasure = function() {
-  return this.trackballControls.object.position.length() / 1e3;
-};
-
-
-function createArrow(length, arrowLength, arrowHead, axis, color) {
-  var arrow = new THREE.ArrowHelper(axis, new THREE.Vector3(0, 0, 0), length, color, arrowLength, arrowHead);
-  arrow.updateMatrix();
-  arrow.line.material.linewidth =  1/DPR;
-  arrow.line.material.opacity = 0.2;
-  arrow.line.material.transparent = true;
-  arrow.cone.material.opacity = 0.2;
-  arrow.cone.material.transparent = true;
-  
-  return arrow;
-}
-
-
-Viewer.prototype.createBasisGroup = function() {
-  var length = 200;
-  var arrowLength = length * 0.2;
-  var arrowHead = arrowLength * 0.4;
+  setUpBasisGroup() {
+    let length = 200;
+    let arrowLength = length * 0.2;
+    let arrowHead = arrowLength * 0.4;
 
     let _createArrow = createArrow.bind(null, length, arrowLength, arrowHead);
 
     function createBasisArrow(axis, color) {
-    let arrow = _createArrow(axis, color);
-    arrow.matrixAutoUpdate = false;
-    arrow.line.renderOrder = 1e11;
-    arrow.cone.renderOrder = 1e11;
-    arrow.line.material.depthWrite = false;
-    arrow.line.material.depthTest = false;
-    arrow.cone.material.depthWrite = false;
-    arrow.cone.material.depthTest = false;
-    return arrow;
+      return _createArrow(axis, color, 0.4, [OnTopOfAll]);
     }
 
-  this.basisGroup = new THREE.Object3D();
-  var xAxis = createBasisArrow(new THREE.Vector3(1, 0, 0), 0xFF0000);
-  var yAxis = createBasisArrow(new THREE.Vector3(0, 1, 0), 0x00FF00);
-  this.basisGroup.add(xAxis);
-  this.basisGroup.add(yAxis);
-};
+    this.basisGroup = SceneGraph.createGroup();
+    let xAxis = createBasisArrow(new Vector(1, 0, 0), 0xFF0000);
+    let yAxis = createBasisArrow(new Vector(0, 1, 0), 0x00FF00);
+    SceneGraph.addToGroup(this.basisGroup, xAxis);
+    SceneGraph.addToGroup(this.basisGroup, yAxis);
+  }
 
-Viewer.prototype.updateBasis = function(basis, depth){
-  this.basisGroup.matrix.identity();
-  var mx = new THREE.Matrix4();
-  mx.makeBasis(basis[0].three(), basis[1].three(), basis[2].three());
-  var depthOff = new THREE.Vector3(0, 0, depth);
-  depthOff.applyMatrix4(mx);
-  mx.setPosition(depthOff);
-  this.basisGroup.applyMatrix(mx);
-};
+  updateBasis(basis, depth) {
+    setBasisToObject3D(this.basisGroup, basis, depth);
+  }
 
-Viewer.prototype.showBasis = function(){
+  showBasis() {
     this.workGroup.add(this.basisGroup);
-};
+  }
 
-Viewer.prototype.hideBasis = function(){
+  hideBasis() {
     if (this.basisGroup.parent !== null) {
       this.basisGroup.parent.remove(this.basisGroup);
     }
-};
-
-
-Viewer.prototype.lookAt = function(obj) {
-  var box = new THREE.Box3();
-  box.setFromObject(obj);
-  let size = box.size();
-  //this.camera.position.set(0,0,0);
-  box.center(this.camera.position);
-  const maxSize = Math.max(size.x, size.z);
-  const dist = maxSize / 2 / Math.tan(Math.PI * this.camera.fov / 360);
-  this.camera.position.addScaledVector(this.camera.position.normalize(), 5000);
-
-  //this.camera.position.sub(new THREE.Vector3(0, 0, dist));
-  this.camera.up = new THREE.Vector3(0,1,0);
-  
+  }
 
+  lookAt(obj) {
+    this.sceneSetup.lookAt(obj);
     this.render();
+  }
+
+  onPick = e => {
+    if (e.button !== 0) {
+      this.handleSolidPick(e);
+    } else {
+      this.handlePick(e);
+    }
   };
   
-Viewer.prototype.handleSolidPick = function(e) {
+  handlePick(event) {
+    this.raycastObjects(event, PICK_KIND.FACE | PICK_KIND.SKETCH | PICK_KIND.EDGE, (object, kind) => {
+      if (kind === PICK_KIND.FACE) {
+        if (this.selectionMgr.pick(object)) {
+          return false;
+        }
+      } else if (kind === PICK_KIND.SKETCH) {
+        if (this.sketchSelectionMgr.pick(object)) {
+          return false;
+        }
+      } else if (kind === PICK_KIND.EDGE) {
+        if (this.edgeSelectionMgr.pick(object)) {
+          return false;
+        }
+      }
+      return true;
+    });
+  }
+
+  handleSolidPick(e) {
     this.raycastObjects(event, PICK_KIND.FACE, (sketchFace) => {
       this.selectionMgr.clear();
       this.bus.notify("solid-pick", sketchFace.solid);
       this.render();
       return false;
     });
-};
+  }
 
-export const PICK_KIND = {
-  FACE:   mask.type(1),
-  SKETCH: mask.type(2),
-  EDGE:   mask.type(3),
-  VERTEX: mask.type(4)
-};
-
-Viewer.prototype.raycastObjects = function(event, kind, visitor) {
-  let pickResults = this.raycast(event);
+  raycastObjects(event, kind, visitor) {
+    let pickResults = this.sceneSetup.raycast(event, this.workGroup);
     const pickers = [
       (pickResult) => {
         if (mask.is(kind, PICK_KIND.SKETCH) && pickResult.object instanceof THREE.Line &&
@@ -301,25 +164,12 @@ Viewer.prototype.raycastObjects = function(event, kind, visitor) {
         }
       }
     }
-};
+  }
+}
 
-Viewer.prototype.handlePick = function(event) {
-  this.raycastObjects(event, PICK_KIND.FACE | PICK_KIND.SKETCH | PICK_KIND.EDGE, (object, kind) => {
-    if (kind == PICK_KIND.FACE) {
-      if (this.selectionMgr.pick(object)) {
-        return false;
-      }
-    } else if (kind == PICK_KIND.SKETCH) {
-      if (this.sketchSelectionMgr.pick(object)) {
-        return false;
-      }
-    } else if (kind == PICK_KIND.EDGE) {
-      if (this.edgeSelectionMgr.pick(object)) {
-        return false;
-      }
-    }
-    return true;
-  });
+export const PICK_KIND = {
+  FACE: mask.type(1),
+  SKETCH: mask.type(2),
+  EDGE: mask.type(3),
+  VERTEX: mask.type(4)
 };
-
-export {Viewer}