threejs-viewer-25

// 修改 js/Viewer.js
// … Other code snippets

getFitBounds(dbIds) {
  let targets = [];

  if (Array.isArray(dbIds) && dbIds.length > 0) {
    this.models.forEach(m => {
      m.traverse(child => {
        if (child.type !== 'Mesh' || !dbIds.includes(child.id)) return;

        targets.push(child);
      });
    });
  } else {
    targets = this.models.concat();
  }

  // get bounding box of object - this will be used to setup navigation and camera
  const bounds = new THREE.Box3();

  targets.forEach((object) => {
    bounds.expandByObject(object);
  });

  return bounds;
}

fitToView(dbIds, fitRatio = 1.5) {
  const camera = this.camera;
  const nav = this.navigation;

  const bounds = this.getFitBounds(dbIds);
  const currentDirection = nav.target.clone().sub(camera.position);
  bounds.getCenter(nav.target);

  const size = bounds.getSize(new THREE.Vector3());
  const maxSize = Math.max(size.x, size.y, size.z);
  const fitHeightDistance = maxSize / (2 * Math.atan(Math.PI * camera.fov / 360));
  const fitWidthDistance = fitHeightDistance / camera.aspect;

  const distance = fitRatio * Math.max(fitHeightDistance, fitWidthDistance);
  const direction = currentDirection.normalize().multiplyScalar(distance);

  camera.position.copy(nav.target).sub(direction);
  nav.update();
}

buildEvents() {
    // ... Other code snippets
    document.addEventListener('keydown', (event) => {
      if ((event.key == 'Escape' || event.key == 'Esc' || event.keyCode == 27)) {
        event.preventDefault();

        this.clearSelection();

        return false;
      }
    });

    this.renderer.domElement.addEventListener(
      'dblclick',
      (event) => {
        const result = this.hitTest(event.clientX, event.clientY);
        if (!result) {
          this.fitToView()
          return;
        } else {
          const mesh = result.object;
          this.fitToView([mesh.id]);
        }
      });
}

// ... Other code snippets
loadModel(url) {
    if (typeof url != 'string')
      throw new Error('Invalid model url');

    const objectLoader = new THREE.ObjectLoader();
    objectLoader.load(url, (obj) => {
      this.scene.add(obj);
      this.models.push(obj);
      this.render();

      this.fitToView(); //!<<< Add this line only
    });
}

buildContextMenu() {
    const dataSource = [
      // ... Other code snippets
      {
        title: 'Focus',
        key: 'focus-selected'
      },
      // ... Other code snippets
    ];

    // ... Other code snippets
    const callBack = (key) => {
      let objects, dbId;

      switch (key) {
        // ... Other code snippets
        case 'focus-selected':
          if (this.selection.length <= 0) return;

          this.fitToView(this.selection);
          break;
      }
    };

    // ... Other code snippets

    this.container.addEventListener('contextmenu', () => {
      // ... Other code snippets
      const hideSelectedMenuItem3 = document.querySelector('#contextMenu li[data-key="focus-selected"]');

      if (this.selection.length > 0) {
        // ... Other code snippets
        hideSelectedMenuItem3.style.display = 'block';
      } else {
        // ... Other code snippets
        hideSelectedMenuItem3.style.display = 'none';
      }
    });
}