three-cad-viewer 2.1.2 → 2.2.0

package/src/fontloader/FontLoader.js

@@ -1,183 +1,150 @@
-import {
-	FileLoader,
-	Loader,
-	ShapePath
-} from 'three';
+import { FileLoader, Loader, ShapePath } from "three";
 
 class FontLoader extends Loader {
-
-	constructor( manager ) {
-
-		super( manager );
-
-	}
-
-	load( url, onLoad, onProgress, onError ) {
-
-		const scope = this;
-
-		const loader = new FileLoader( this.manager );
-		loader.setPath( this.path );
-		loader.setRequestHeader( this.requestHeader );
-		loader.setWithCredentials( this.withCredentials );
-		loader.load( url, function ( text ) {
-
-			const font = scope.parse( JSON.parse( text ) );
-
-			if ( onLoad ) onLoad( font );
-
-		}, onProgress, onError );
-
-	}
-
-	parse( json ) {
-
-		return new Font( json );
-
-	}
-
+  constructor(manager) {
+    super(manager);
+  }
+
+  load(url, onLoad, onProgress, onError) {
+    const scope = this;
+
+    const loader = new FileLoader(this.manager);
+    loader.setPath(this.path);
+    loader.setRequestHeader(this.requestHeader);
+    loader.setWithCredentials(this.withCredentials);
+    loader.load(
+      url,
+      function (text) {
+        const font = scope.parse(JSON.parse(text));
+
+        if (onLoad) onLoad(font);
+      },
+      onProgress,
+      onError,
+    );
+  }
+
+  parse(json) {
+    return new Font(json);
+  }
 }
 
 //
 
 class Font {
+  constructor(data) {
+    this.isFont = true;
 
-	constructor( data ) {
-
-		this.isFont = true;
-
-		this.type = 'Font';
-
-		this.data = data;
-
-	}
-
-	generateShapes( text, size = 100 ) {
-
-		const shapes = [];
-		const paths = createPaths( text, size, this.data );
-
-		for ( let p = 0, pl = paths.length; p < pl; p ++ ) {
-
-			shapes.push( ...paths[ p ].toShapes() );
+    this.type = "Font";
 
-		}
+    this.data = data;
+  }
 
-		return shapes;
+  generateShapes(text, size = 100) {
+    const shapes = [];
+    const paths = createPaths(text, size, this.data);
 
-	}
+    for (let p = 0, pl = paths.length; p < pl; p++) {
+      shapes.push(...paths[p].toShapes());
+    }
 
+    return shapes;
+  }
 }
 
-function createPaths( text, size, data ) {
+function createPaths(text, size, data) {
+  const chars = Array.from(text);
+  const scale = size / data.resolution;
+  const line_height =
+    (data.boundingBox.yMax - data.boundingBox.yMin + data.underlineThickness) *
+    scale;
 
-	const chars = Array.from( text );
-	const scale = size / data.resolution;
-	const line_height = ( data.boundingBox.yMax - data.boundingBox.yMin + data.underlineThickness ) * scale;
+  const paths = [];
 
-	const paths = [];
+  let offsetX = 0,
+    offsetY = 0;
 
-	let offsetX = 0, offsetY = 0;
+  for (let i = 0; i < chars.length; i++) {
+    const char = chars[i];
 
-	for ( let i = 0; i < chars.length; i ++ ) {
-
-		const char = chars[ i ];
-
-		if ( char === '\n' ) {
-
-			offsetX = 0;
-			offsetY -= line_height;
-
-		} else {
-
-			const ret = createPath( char, scale, offsetX, offsetY, data );
-			offsetX += ret.offsetX;
-			paths.push( ret.path );
-
-		}
-
-	}
-
-	return paths;
+    if (char === "\n") {
+      offsetX = 0;
+      offsetY -= line_height;
+    } else {
+      const ret = createPath(char, scale, offsetX, offsetY, data);
+      offsetX += ret.offsetX;
+      paths.push(ret.path);
+    }
+  }
 
+  return paths;
 }
 
-function createPath( char, scale, offsetX, offsetY, data ) {
-
-	const glyph = data.glyphs[ char ] || data.glyphs[ '?' ];
-
-	if ( ! glyph ) {
-
-		console.error( 'THREE.Font: character "' + char + '" does not exists in font family ' + data.familyName + '.' );
-
-		return;
-
-	}
-
-	const path = new ShapePath();
-
-	let x, y, cpx, cpy, cpx1, cpy1, cpx2, cpy2;
-
-	if ( glyph.o ) {
-
-		const outline = glyph._cachedOutline || ( glyph._cachedOutline = glyph.o.split( ' ' ) );
-
-		for ( let i = 0, l = outline.length; i < l; ) {
-
-			const action = outline[ i ++ ];
-
-			switch ( action ) {
-
-				case 'm': // moveTo
-
-					x = outline[ i ++ ] * scale + offsetX;
-					y = outline[ i ++ ] * scale + offsetY;
+function createPath(char, scale, offsetX, offsetY, data) {
+  const glyph = data.glyphs[char] || data.glyphs["?"];
 
-					path.moveTo( x, y );
+  if (!glyph) {
+    console.error(
+      `THREE.Font: character "${char}" does not exists in font family ${data.familyName}`,
+    );
 
-					break;
+    return;
+  }
 
-				case 'l': // lineTo
+  const path = new ShapePath();
 
-					x = outline[ i ++ ] * scale + offsetX;
-					y = outline[ i ++ ] * scale + offsetY;
+  let x, y, cpx, cpy, cpx1, cpy1, cpx2, cpy2;
 
-					path.lineTo( x, y );
+  if (glyph.o) {
+    const outline =
+      glyph._cachedOutline || (glyph._cachedOutline = glyph.o.split(" "));
 
-					break;
+    for (let i = 0, l = outline.length; i < l; ) {
+      const action = outline[i++];
 
-				case 'q': // quadraticCurveTo
+      switch (action) {
+        case "m": // moveTo
+          x = outline[i++] * scale + offsetX;
+          y = outline[i++] * scale + offsetY;
 
-					cpx = outline[ i ++ ] * scale + offsetX;
-					cpy = outline[ i ++ ] * scale + offsetY;
-					cpx1 = outline[ i ++ ] * scale + offsetX;
-					cpy1 = outline[ i ++ ] * scale + offsetY;
+          path.moveTo(x, y);
 
-					path.quadraticCurveTo( cpx1, cpy1, cpx, cpy );
+          break;
 
-					break;
+        case "l": // lineTo
+          x = outline[i++] * scale + offsetX;
+          y = outline[i++] * scale + offsetY;
 
-				case 'b': // bezierCurveTo
+          path.lineTo(x, y);
 
-					cpx = outline[ i ++ ] * scale + offsetX;
-					cpy = outline[ i ++ ] * scale + offsetY;
-					cpx1 = outline[ i ++ ] * scale + offsetX;
-					cpy1 = outline[ i ++ ] * scale + offsetY;
-					cpx2 = outline[ i ++ ] * scale + offsetX;
-					cpy2 = outline[ i ++ ] * scale + offsetY;
+          break;
 
-					path.bezierCurveTo( cpx1, cpy1, cpx2, cpy2, cpx, cpy );
+        case "q": // quadraticCurveTo
+          cpx = outline[i++] * scale + offsetX;
+          cpy = outline[i++] * scale + offsetY;
+          cpx1 = outline[i++] * scale + offsetX;
+          cpy1 = outline[i++] * scale + offsetY;
 
-					break;
+          path.quadraticCurveTo(cpx1, cpy1, cpx, cpy);
 
-			}
+          break;
 
-		}
+        case "b": // bezierCurveTo
+          cpx = outline[i++] * scale + offsetX;
+          cpy = outline[i++] * scale + offsetY;
+          cpx1 = outline[i++] * scale + offsetX;
+          cpy1 = outline[i++] * scale + offsetY;
+          cpx2 = outline[i++] * scale + offsetX;
+          cpy2 = outline[i++] * scale + offsetY;
 
-	}
+          path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, cpx, cpy);
 
-	return { offsetX: glyph.ha * scale, path: path };
+          break;
+      }
+    }
+  }
 
+  return { offsetX: glyph.ha * scale, path: path };
 }
 
 export { FontLoader, Font };

package/src/grid.js

@@ -1,37 +1,90 @@
 import * as THREE from "three";
+import { Font } from "./fontloader/FontLoader.js";
+import { helvetiker } from "./font.js";
 
 class Grid {
-  constructor(display, bbox, ticks, axes0, grid, flipY) {
+  constructor(display, bbox, ticks, centerGrid, axes0, grid, flipY, theme) {
     if (ticks === undefined) {
       ticks = 10;
     }
     this.display = display;
     this.bbox = bbox;
-
+    this.centerGrid = centerGrid;
     this.grid = grid;
     this.allGrid = grid[0] | grid[1] | grid[2];
+    const s = new THREE.Vector3();
+    bbox.getSize(s);
+    const s2 = Math.max(s.x, s.y, s.z);
+    // const s2 = bbox.boundingSphere().radius;
 
     this.gridHelper = [];
     // in case the bbox has the same siez as the nice grid there should be
     // a margin bewteen grid and object. Hence factor 1.1
     var [axisStart, axisEnd, niceTick] = this.niceBounds(
-      -bbox.max_dist_from_center() * 1.1,
-      bbox.max_dist_from_center() * 1.1,
+      -s2 * 1.05,
+      s2 * 1.05,
       2 * ticks,
     );
     this.size = axisEnd - axisStart;
 
+    const font = new Font(helvetiker);
+
     this.ticks = niceTick;
 
     for (var i = 0; i < 3; i++) {
-      this.gridHelper.push(
+      var group = new THREE.Group();
+      group.name = `GridHelper-${i}`;
+      group.add(
         new THREE.GridHelper(
           this.size,
           this.size / this.ticks,
-          0x888888,
-          0xcccccc,
+          theme === "dark" ? 0xcccccc : 0x777777,
+          theme == "dark" ? 0x999999 : 0xbbbbbb,
         ),
       );
+      const mat = new THREE.LineBasicMaterial({
+        color:
+          theme === "dark"
+            ? new THREE.Color(0.5, 0.5, 0.5)
+            : new THREE.Color(0.4, 0.4, 0.4),
+        side: THREE.DoubleSide,
+      });
+      var dir;
+      var geom;
+      for (var x = -this.size / 2; x <= this.size / 2; x += this.ticks) {
+        geom = this.createNumber(x, font);
+        if (i == 0) {
+          geom.rotateX(-Math.PI / 2);
+          geom.rotateY(Math.PI / 2);
+        } else if (i == 1) {
+          geom.rotateX(Math.PI / 2);
+          geom.rotateY(-Math.PI / 2);
+        } else {
+          geom.rotateX(Math.PI / 2);
+          geom.rotateY(-Math.PI / 2);
+        }
+        const label = new THREE.Mesh(geom, mat);
+        dir = i == 1 ? -1 : 1;
+        label.position.set(dir * x, 0, 0);
+        group.add(label);
+
+        if (Math.abs(x) < 1e-6) continue;
+
+        geom = this.createNumber(x, font);
+        if (i == 0) {
+          geom.rotateX(-Math.PI / 2);
+        } else if (i == 1) {
+          geom.rotateX(-Math.PI / 2);
+          geom.rotateZ(Math.PI);
+        } else {
+          geom.rotateX(Math.PI / 2);
+        }
+        const label2 = new THREE.Mesh(geom, mat);
+        dir = i == 0 ? -1 : 1;
+        label2.position.set(0, 0, dir * x);
+        group.add(label2);
+      }
+      this.gridHelper.push(group);
     }
 
     this.gridHelper[0].rotateX(Math.PI / 2);
@@ -43,6 +96,21 @@ class Grid {
     this.setVisible();
   }
 
+  createNumber(x, font) {
+    // experimentally detected: p1=(size=640, font_size=7.1) p2=(size=2.2, font_size=0.035)
+    const m = (0.035 - 7.1) / (2.2 - 640);
+    const fontSize = m * (this.size - 640) + 7.1;
+
+    const shape = font.generateShapes(x.toFixed(1), fontSize);
+    var geom = new THREE.ShapeGeometry(shape);
+
+    geom.computeBoundingBox();
+    var xMid = -0.5 * (geom.boundingBox.max.x - geom.boundingBox.min.x);
+    var yMid = -0.5 * (geom.boundingBox.max.y - geom.boundingBox.min.y);
+    geom.translate(xMid, yMid, 0);
+    return geom;
+  }
+
   // https://stackoverflow.com/questions/4947682/intelligently-calculating-chart-tick-positions
   niceNumber(value, round) {
     var exponent = Math.floor(Math.log10(value));
@@ -109,7 +177,7 @@ class Grid {
   setGrid(action, flag = null) {
     switch (action) {
       case "grid":
-        this.allGrid = (flag == null) ? !this.allGrid : flag;
+        this.allGrid = flag == null ? !this.allGrid : flag;
         this.grid[0] = this.allGrid;
         this.grid[1] = this.allGrid;
         this.grid[2] = this.allGrid;
@@ -139,17 +207,25 @@ class Grid {
       for (var i = 0; i < 3; i++) {
         this.gridHelper[i].position.set(0, 0, 0);
       }
-      this.gridHelper[0].position.z = -this.size / 2;
-      this.gridHelper[1].position.y = ((flipY ? 1 : -1) * this.size) / 2;
-      this.gridHelper[2].position.x = -this.size / 2;
+      this.gridHelper[0].position.z = this.centerGrid ? 0 : -this.size / 2;
+      this.gridHelper[1].position.y = this.centerGrid
+        ? 0
+        : ((flipY ? 1 : -1) * this.size) / 2;
+      this.gridHelper[2].position.x = this.centerGrid ? 0 : -this.size / 2;
     } else {
       const c = this.bbox.center();
       for (i = 0; i < 3; i++) {
         this.gridHelper[i].position.set(...c);
       }
-      this.gridHelper[0].position.z = -this.size / 2 + c[2];
-      this.gridHelper[1].position.y = ((flipY ? 1 : -1) * this.size) / 2 + c[1];
-      this.gridHelper[2].position.x = -this.size / 2 + c[0];
+      this.gridHelper[0].position.z = this.centerGrid
+        ? c[2]
+        : -this.size / 2 + c[2];
+      this.gridHelper[1].position.y = this.centerGrid
+        ? c[1]
+        : ((flipY ? 1 : -1) * this.size) / 2 + c[1];
+      this.gridHelper[2].position.x = this.centerGrid
+        ? c[0]
+        : -this.size / 2 + c[0];
     }
   }
 

package/src/icons.js

@@ -45,7 +45,6 @@ import dark_shape_no from "../icons/dark/shape_no.svg";
 import dark_stop from "../icons/dark/stop.svg";
 import dark_top from "../icons/dark/top.svg";
 
-
 import dark_axes from "../icons/dark/axes.svg";
 import dark_axes0 from "../icons/dark/axes0.svg";
 import dark_grid from "../icons/dark/grid.svg";
@@ -68,7 +67,6 @@ import light_angle from "../icons/light/angle.svg";
 import light_transparent from "../icons/light/transparent.svg";
 import light_blackedges from "../icons/light/black_edges.svg";
 
-
 const icons = {
   bottom: { light: light_bottom, dark: dark_bottom },
   front: { light: light_front, dark: dark_front },

package/src/index.html

@@ -122,18 +122,29 @@
                             </div>
                         </div>
                         <div class="tcv_clip_checks">
-                            <span class="tcv_tooltip" data-tooltip="Use intersection clipping">
-                                <span class="tcv_label">Intersection</span><input
-                                    class='tcv_clip_intersection tcv_check' type="checkbox" />
-                            </span>
-                            <span class="tcv_tooltip" data-tooltip="Show clipping planes">
-                                <span class="tcv_label">Planes</span><input
-                                    class='tcv_clip_plane_helpers tcv_axes0 tcv_check' type="checkbox" />
+                            <div>
+                                <span class="tcv_tooltip" data-tooltip="Use intersection clipping">
+                                    <input class='tcv_clip_intersection tcv_check' type="checkbox" />
+                                    <span class="tcv_label">Intersection</span>
+                                </span>
+                                <span class="tcv_tooltip" data-tooltip="Show clipping planes">
+                                    <input class='tcv_clip_plane_helpers tcv_axes0 tcv_check' type="checkbox" />
+                                    <span class="tcv_label">Planes</span>
+                                </span>
+                            </div>
+                            <span class="tcv_tooltip" data-tooltip="Use object color caps instead of RGB">
+                                <input class='tcv_clip_caps tcv_axes0 tcv_check' type="checkbox" />
+                                <span class="tcv_label">Use object color caps</span>
                             </span>
                         </div>
                     </div>
                     <div class="tcv_cad_material_container">
-                        <div class="tcv_material_ambientlight tcv_label tcv_clip_checks">
+                        <div class="tcv_cad_tree_toggles">
+                            <span class="tcv_tooltip" data-tooltip="Reset to original values">
+                                <input class='tcv_material_reset tcv_btn tcv_small_btn' value="R" type="button" />
+                            </span>
+                        </div>
+                        <div class="tcv_material_ambientlight tcv_label">
                             Ambient light intensity (%)
                         </div>
                         <div class="tcv_slider_group">