WebGL (Three.js) canvas 用鼠標滾輪放大和縮小

Question

我正在使用 WebGL (Three.js) 來試驗在 Angular 應用程序中渲染 3D 場景。 我想做的一件事是允許覆蓋鼠標滾輪事件，以便它們放大和縮小 canvas 而不是整個 window。 我首先嘗試禁用mousewheel和mousedown事件偵聽器，但它們似乎正在響應事件偵聽器。 如何讓它放大和縮小 canvas，而不是整個 window？

我的代碼在這里可用： https://stackblitz.com/edit/angular-ivy-hwzz3r 。

  animate() {
    // We have to run this outside angular zones,
    // because it could trigger heavy changeDetection cycles.
    this.ngZone.runOutsideAngular(() => {
      if (document.readyState !== 'loading') {
        this.render();
      } else {
        window.addEventListener('DOMContentLoaded', () => {
          this.render();
        });
      }
      window.addEventListener('resize', () => {
        this.resize();
      });
      window.addEventListener('mousewheel', (event) => {
        event.preventDefault();
      }, false);
      window.addEventListener('mousedown', (event) => {
        event.preventDefault();
      }, false);
    });
  }

Answer 1

首先， mousewheel是非標准且不推薦使用的，您應該使用wheel事件。

addEventListener方法可以采用可選的第二個參數，它可以是包含passive鍵的 object。 以下是passive選項：

一個Boolean ，如果為true ，則表明監聽器指定的 function 永遠不會調用preventDefault() 。 如果被動偵聽器確實調用了preventDefault() ，則用戶代理除了生成控制台警告之外什么都不做。

使用被動偵聽器改善滾動性能有注釋，它指出：

根據規范， passive選項的默認值始終為false 。 但是，這引入了事件偵聽器處理某些觸摸事件（以及其他事件）在嘗試處理滾動時阻塞瀏覽器主線程的可能性，從而導致滾動處理期間的性能可能大大降低。

為了防止這個問題，一些瀏覽器（特別是 Chrome 和 Firefox）已經將文檔級節點Window 、 Document和Document.body上的touchstart和touchmove事件的passive選項的默認值更改為true 。 這可以防止調用事件偵聽器，因此它不能在用戶滾動時阻止頁面呈現。

即使那里沒有提到wheel / mousewheel ，這些事件也是如此。 您可以在瀏覽器兼容性表中看到這一點。

簡而言之，為了能夠在某些瀏覽器中將preventDefault用於輪事件，您必須為addEventListener傳遞{ passive: false }選項：

window.addEventListener('wheel', (event) => {
  event.preventDefault();
}, { passive: false });

---

對於放大/縮小，您可以像這樣使用PerspectiveCamera.zoom和WheelEvent.deltaY ：

window.addEventListener('wheel', (event) => {
  event.preventDefault(); /// prevent scrolling
  
  let zoom = this.camera.zoom; // take current zoom value
  zoom += event.deltaY * -0.01; /// adjust it
  zoom = Math.min(Math.max(.125, zoom), 4); /// clamp the value

  this.camera.zoom = zoom /// assign new zoom value
  this.camera.updateProjectionMatrix(); /// make the changes take effect
}, { passive: false });