在Three.js EmbeddedHTML场景中使用鼠标滚轮进行缩放

Question

我有这个角度服务（用打字稿），并实现了three.js场景。我需要使用鼠标滚轮放大/缩小场景。 我的three.js场景已嵌入html文件中。 当我在html页面场景（使用Chrome）中滚动时，页面会上下滚动。我想使用鼠标滚轮仅在three.js场景内进行缩放。我试图使用OrbitControls。

Angular服务：

 import * as THREE from 'three';
        import { OrbitControls } from 'three-orbitcontrols-ts';
        import { Injectable } from '@angular/core';
        import { Item } from '../item';

    @Injectable({
      providedIn: 'root'
    })
    export class CanvasService {
      private canvas: HTMLCanvasElement;
      private renderer: THREE.WebGLRenderer;
      private camera: THREE.PerspectiveCamera;
      private scene: THREE.Scene;
      private ambientLight: THREE.AmbientLight;
      private pointLight: THREE.PointLight;
      private controls: any;

      private groundMaterial: THREE.MeshPhongMaterial;
      private textureLoader: THREE.TextureLoader;
      private textureSquares: any;
      private altura: number = 10;
      private largura: number = 10;
      private comprimento: number = 10;
      private espessura: number = 0.4;

      private texture: any;
      private material: THREE.MeshPhongMaterial;

      private raycaster: any;
      private mouse: any;

      private cube: THREE.Mesh;

      createScene(elementId: string, item: Item): void {
        this.readItem(item);
        this.raycaster = new THREE.Raycaster();
        this.mouse = new THREE.Vector2();
        // The first step is to get the reference of the canvas element from our HTML document
        this.canvas = <HTMLCanvasElement>document.getElementById(elementId);

        this.renderer = new THREE.WebGLRenderer({
          canvas: this.canvas,
          alpha: true,    // transparent background
          antialias: true // smooth edges
        });
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

        // this.renderer.domElement.addEventListener('mousedown', this.onDocumentMouseDown, false);
        // this.renderer.domElement.addEventListener('mousemove', this.onDocumentMouseMove, false);

        // create the scene
        this.scene = new THREE.Scene();

        this.camera = new THREE.PerspectiveCamera(
          75, window.innerWidth / window.innerHeight, 0.1, 1000
        );
        this.camera.position.set(0, 10, 40);
        this.scene.add(this.camera);

        this.controls = new OrbitControls(this.camera);
        this.controls.addEventListener( 'change', this.render() );

        //Luz
        this.ambientLight = new THREE.AmbientLight(0xffffcc);
        this.pointLight = new THREE.PointLight(0xffffcc, 0.35, 50000000, 2);

        this.pointLight.position.set(30, 30, 30);
        this.pointLight.castShadow = true;
        this.pointLight.shadow.mapSize.width = 512;
        this.pointLight.shadow.mapSize.height = 512;

        this.scene.add(this.ambientLight);
        this.scene.add(this.pointLight);

        this.controls.minDistance = 10;
        this.controls.maxDistance = 20;
        this.camera.position.set(0, 5, 35);
        this.controls.update();
        if (!item) {
          this.texture = new THREE.TextureLoader().load("/assets/madeira_natural.jpg");
          this.material = new THREE.MeshPhongMaterial({ color: 0xffffff, map: this.texture, side: THREE.DoubleSide });
        }
        this.buildFloor();
        if (item)
          this.buildCube();
      }

      animate(): void {
        window.addEventListener('DOMContentLoaded', () => {
          this.render();
        });

        window.addEventListener('resize', () => {
          this.resize();
        });
      }

      render() {
        requestAnimationFrame(() => {
          this.render();
        });

        this.controls.update();
        this.renderer.render(this.scene, this.camera);
      }

      resize() {
        let width = window.innerWidth;
        let height = window.innerHeight;

        this.camera.aspect = width / height;
        this.camera.updateProjectionMatrix();

        this.renderer.setSize(width, height);
      }

      buildFloor() {

        this.textureLoader = new THREE.TextureLoader();
        this.textureSquares = this.textureLoader.load("/assets/ground.jpg");
        // this.textureSquares.minFilter = THREE.LinearFilter;
        this.textureSquares.repeat.set(3000, 3000);
        this.textureSquares.wrapS = this.textureSquares.wrapT = THREE.RepeatWrapping;
        this.textureSquares.magFilter = THREE.NearestFilter;
        this.textureSquares.format = THREE.RGBFormat;

        this.groundMaterial = new THREE.MeshPhongMaterial({
          shininess: 80,
          color: 0xffffff,
          specular: 0xffffff,
          map: this.textureSquares
        })

        var planeGeometry = new THREE.PlaneBufferGeometry(30, 30);
        var ground = new THREE.Mesh(planeGeometry, this.groundMaterial);
        ground.position.set(0, -this.altura / 2 - 0.2, 0);
        ground.rotation.x = - Math.PI / 2;
        ground.scale.set(1000, 1000, 1000);
        ground.receiveShadow = true;
        this.scene.add(ground);
        ground.name = "g";
      }        

      buildCube() {

        //Traseira do cubo
        var geometry = new THREE.CubeGeometry(this.comprimento, this.altura, this.espessura);
        this.cube = new THREE.Mesh(geometry, this.material);
        this.cube.position.set(0, -this.espessura / 2, this.espessura / 2);
        this.cube.castShadow = true;
        this.cube.receiveShadow = false;
        this.scene.add(this.cube);
        this.cube.name = "t";
        //...
      }

      readItem(item: Item) {
        if (item) {
          if (item.width)
            this.largura = item.width;
          if (item.depth)
            this.comprimento = item.depth;
          if (item.height)
            this.altura = item.height;
          if (item.material) {
            var stringTexture = '';
            if (item.material == 'ferro') {
              stringTexture = '/assets/metal' + "_" + 'claro' + ".jpg";
            } else if (item.material == 'madeira') {
              stringTexture = '/assets/madeira' + "_" + 'claro' + ".jpg";
            } else if (item.material == 'pedra') {
              stringTexture = '/assets/pedra' + "_" + 'claro' + ".jpg";
            } else {
              console.log("Material inexistente!");
            }

            this.texture = new THREE.TextureLoader().load(stringTexture);
            this.texture.minFilter = THREE.LinearFilter;
            this.material = new THREE.MeshPhongMaterial({ color: 0xffffff, map: this.texture, specular: 0xffffff, shininess: 100, side: THREE.DoubleSide });
          }
        }
      }
    }

谢谢。