hover hightlight

package.json

@@ -6,8 +6,13 @@
     "deploy": "gh-pages -d dist -t true"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.12.13",
+    "babel-loader": "^8.2.2",
     "css-loader": "^5.1.3",
     "gh-pages": "^3.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.3",
     "redux": "^4.0.5",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",

src/app.jsx

@@ -0,0 +1,11 @@
+
+
+import React from 'react';
+import { Provider } from 'react-redux';
+
+
+export const App = ({ store }) => (
+  <Provider store={store}>
+    <div>hellodddddd</div>
+  </Provider>
+);

src/index.js

@@ -4,16 +4,19 @@ 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 '../node_modules/three/examples/jsm/libs/stats.module.js';
+import Stats from './stats.module.js';
 
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { createStore, applyMiddleware } from 'redux'
 
+import { App } from './app.jsx'
 
-
-function main() {
+function main(store) {
 
   var stats = new Stats();
   stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
-  document.body.appendChild(stats.dom);
+  document.getElementById('stats').appendChild(stats.dom);
 
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({ canvas });
@@ -31,7 +34,7 @@ function main() {
   const far = 50;
   const camera = new THREE.OrthographicCamera(-size, size, size, -size, near, far);
   camera.zoom = 0.1;
-  camera.position.set(0, 0, 20);
+  camera.position.set(0, 0, 30);
 
   // const controls = new OrbitControls(camera, view1Elem);
   const controls = new TrackballControls(camera, canvas);
@@ -89,4 +92,35 @@ function main() {
   render();
 }
 
+function todos(state = [], action) {
+  switch (action.type) {
+    case 'ADD_TODO':
+      return state.concat([action.text])
+    default:
+      return state
+  }
+}
+
+const store = createStore(todos, ['Use Redux'])
+
+store.dispatch({
+  type: 'ADD_TODO',
+  text: 'Read the docs'
+})
+
+console.log(store.getState())
+
+
+// main(store);
 main();
+
+
+// document.addEventListener('DOMContentLoaded', () => {
+
+//   const root = document.getElementById('react');
+//   ReactDOM.render(
+//     React.createElement(App, { store: store }, null)
+//     , root
+//   );
+
+// });

src/sketcher/Sketcher.js

@@ -37,8 +37,8 @@ class Sketcher extends THREE.Group {
     this.add(this.sketch);
 
     this.raycaster = new THREE.Raycaster();
-    this.raycaster.params.Line.threshold = 0.4;
-    this.raycaster.params.Points.threshold = 2;
+    this.raycaster.params.Line.threshold = 0.8;
+    this.raycaster.params.Points.threshold = 1.5;
 
     // [0]:x, [1]:y, [2]:z
     this.objIdx = new Map()

src/sketcher/extrude.js

@@ -57,7 +57,7 @@ export function extrude() {
 
   const shape = new THREE.Shape(v2s);
 
-  const extrudeSettings = { amount: 8, bevelEnabled: false};
+  const extrudeSettings = { depth: 8, bevelEnabled: false};
 
   const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
 

src/sketcher/pickEvents.js

@@ -3,16 +3,6 @@ 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,
@@ -23,10 +13,9 @@ export function onHover(e) {
 
   const hoverPts = this.raycaster.intersectObjects(this.sketch.children)
 
-  // console.log(hoverPts)
+  let idx = []
   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) {
@@ -36,19 +25,38 @@ export function onHover(e) {
         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
+    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(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)) {
+          ob.material.color.set(0x555555)
+        }
+      }
+      this.hovered = []
+      // console.log('render2')
+      this.dispatchEvent({ type: 'change' })
+    }
+  }
 }
 
 

src/stats.module.js

@@ -0,0 +1,168 @@
+var Stats = function () {
+
+  var mode = 0;
+
+  var container = document.createElement('div');
+  container.style.cssText =
+    'position:fixed;bottom:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
+  container.addEventListener('click', function (event) {
+
+    event.preventDefault();
+    showPanel(++mode % container.children.length);
+
+  }, false);
+
+  //
+
+  function addPanel(panel) {
+
+    container.appendChild(panel.dom);
+    return panel;
+
+  }
+
+  function showPanel(id) {
+
+    for (var i = 0; i < container.children.length; i++) {
+
+      container.children[i].style.display = i === id ? 'block' : 'none';
+
+    }
+
+    mode = id;
+
+  }
+
+  //
+
+  var beginTime = (performance || Date).now(), prevTime = beginTime, frames = 0;
+
+  var fpsPanel = addPanel(new Stats.Panel('FPS', '#0ff', '#002'));
+  var msPanel = addPanel(new Stats.Panel('MS', '#0f0', '#020'));
+
+  if (self.performance && self.performance.memory) {
+
+    var memPanel = addPanel(new Stats.Panel('MB', '#f08', '#201'));
+
+  }
+
+  showPanel(0);
+
+  return {
+
+    REVISION: 16,
+
+    dom: container,
+
+    addPanel: addPanel,
+    showPanel: showPanel,
+
+    begin: function () {
+
+      beginTime = (performance || Date).now();
+
+    },
+
+    end: function () {
+
+      frames++;
+
+      var time = (performance || Date).now();
+
+      msPanel.update(time - beginTime, 200);
+
+      if (time >= prevTime + 1000) {
+
+        fpsPanel.update((frames * 1000) / (time - prevTime), 100);
+
+        prevTime = time;
+        frames = 0;
+
+        if (memPanel) {
+
+          var memory = performance.memory;
+          memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);
+
+        }
+
+      }
+
+      return time;
+
+    },
+
+    update: function () {
+
+      beginTime = this.end();
+
+    },
+
+    // Backwards Compatibility
+
+    domElement: container,
+    setMode: showPanel
+
+  };
+
+};
+
+Stats.Panel = function (name, fg, bg) {
+
+  var min = Infinity, max = 0, round = Math.round;
+  var PR = round(window.devicePixelRatio || 1);
+
+  var WIDTH = 80 * PR, HEIGHT = 48 * PR,
+    TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
+    GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
+    GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
+
+  var canvas = document.createElement('canvas');
+  canvas.width = WIDTH;
+  canvas.height = HEIGHT;
+  canvas.style.cssText = 'width:80px;height:48px';
+
+  var context = canvas.getContext('2d');
+  context.font = 'bold ' + (9 * PR) + 'px Helvetica,Arial,sans-serif';
+  context.textBaseline = 'top';
+
+  context.fillStyle = bg;
+  context.fillRect(0, 0, WIDTH, HEIGHT);
+
+  context.fillStyle = fg;
+  context.fillText(name, TEXT_X, TEXT_Y);
+  context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
+
+  context.fillStyle = bg;
+  context.globalAlpha = 0.9;
+  context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
+
+  return {
+
+    dom: canvas,
+
+    update: function (value, maxValue) {
+
+      min = Math.min(min, value);
+      max = Math.max(max, value);
+
+      context.fillStyle = bg;
+      context.globalAlpha = 1;
+      context.fillRect(0, 0, WIDTH, GRAPH_Y);
+      context.fillStyle = fg;
+      context.fillText(round(value) + ' ' + name + ' (' + round(min) + '-' + round(max) + ')', TEXT_X, TEXT_Y);
+
+      context.drawImage(canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT);
+
+      context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT);
+
+      context.fillStyle = bg;
+      context.globalAlpha = 0.9;
+      context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round((1 - (value / maxValue)) * GRAPH_HEIGHT));
+
+    }
+
+  };
+
+};
+
+export default Stats;

webpack.common.js

@@ -24,8 +24,21 @@ module.exports = {
           "sass-loader",
         ],
       },
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ["@babel/preset-react"]
+          }
+        }
+      },
     ],
   },
+  resolve: {
+    extensions: ['.js', '.jsx', '*']
+  }
 };