yskang

threejs-viewer-22

May 5th, 2021 (edited)
642
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // 修改 Viewer.js
  2.  
  3. class Viewer {
  4.   constructor(container) {
  5.     // ... other code snippet
  6.     this.selection = []; //!<<< add this line
  7.   }
  8.  
  9.   init() {
  10.     // ... other code snippet
  11.  
  12.     this.buildContextMenu(); //!<<< add this line
  13.   }
  14.  
  15.   // 取代整個
  16.   onMouseClicked( event ) {
  17.     this.clearSelection();
  18.  
  19.     const result = this.hitTest(event.clientX, event.clientY);
  20.     if (!result) return;
  21.  
  22.     console.log(result);
  23.     const mesh = result.object;
  24.  
  25.     this.selection.push(mesh.id);
  26.  
  27.     const geometry = mesh.geometry.clone();
  28.     const selectionOverly = new THREE.Mesh(geometry, this.selectionMaterial);
  29.     selectionOverly.matrix.copy(mesh.matrixWorld);
  30.     selectionOverly.matrixAutoUpdate = false;
  31.     selectionOverly.matrixWorldNeedsUpdate = true;
  32.     selectionOverly.frustumCulled = false;
  33.     selectionOverly.dbId = mesh.id;
  34.     this.selectionScene.add(selectionOverly);
  35.  
  36.     const props = mesh.parent.userData;
  37.     const objectName = mesh.parent.name;
  38.     this.propertyPanel.setTitle(objectName);
  39.     this.propertyPanel.setProperties(props);
  40.     if (!this.propertyPanel.isVisible()) {
  41.       this.propertyPanel.setVisible(true);
  42.     }
  43.   }
  44.  
  45.   clearSelection() {
  46.     while (this.selectionScene.children.length > 0) {
  47.       let mesh = this.selectionScene.children.pop();
  48.       mesh.material.dispose();
  49.       mesh.geometry.dispose();
  50.       mesh.material = null;
  51.       mesh.geometry = null;
  52.       mesh = null;
  53.     }
  54.  
  55.     while (this.selection.length) {
  56.       this.selection.pop();
  57.     }
  58.   }
  59.  
  60.   clientToViewport(clientX, clientY) {
  61.     const mouse = new THREE.Vector2();
  62.     mouse.x = (clientX / window.innerWidth) * 2 - 1;
  63.     mouse.y = -(clientY / window.innerHeight) * 2 + 1;
  64.     return mouse;
  65.   }
  66.  
  67.   hitTestViewport(vpVec) {
  68.     const raycaster = new THREE.Raycaster();
  69.     raycaster.setFromCamera(vpVec, this.camera);
  70.     const intersects = raycaster.intersectObjects(this.models, true);
  71.     console.log(intersects);
  72.  
  73.     return intersects[0];
  74.   }
  75.  
  76.   hitTest(clientX, clientY) {
  77.     return this.hitTestViewport(this.clientToViewport(clientX, clientY));
  78.   }
  79.  
  80.   buildContextMenu() {
  81.     const dataSource = [
  82.       {
  83.         title: 'Hide',
  84.         key: 'hide-selected',
  85.       },
  86.       {
  87.         title: 'Isolate',
  88.         key: 'isolate-selected'
  89.       },
  90.       {
  91.         title: 'Show All',
  92.         key: 'show-all'
  93.       }
  94.     ];
  95.  
  96.     const contextMenu = new SimpleContextMenu();
  97.     const callBack = (key) => {
  98.       alert(key);
  99.     };
  100.  
  101.     const options = {
  102.       delay: 500//delay submenu  
  103.     };
  104.  
  105.     contextMenu.register(`#${this.container.id}`, callBack, dataSource, options);
  106.     this.contextMenu = contextMenu;
  107.   }
  108. }
  109.  
  110. // 修改 js/index.js
  111. (async function () {
  112.   const SimpleContextMenu = await require('simple-context-menu');
  113.   window.SimpleContextMenu = SimpleContextMenu.default;
  114.  
  115.   // ... other code snippet
  116. })();
  117.  
  118.  
  119. // 修改 index.html
  120. <script src="https://unpkg.com/require-unpkg"></script>
RAW Paste Data