codaline-io / angular-stl-model-viewer

Angular component for rendering an STL model
MIT License
35 stars 13 forks source link

Get this issue: "OrbitControls.js:1331 Unable to preventDefault inside passive event listener invocation." when i do zoom in or zoom out #602

Closed Swaraj55555 closed 1 month ago

Swaraj55555 commented 1 month ago

HTML Code

<input
        type="file"
        (click)="clickFile($event)"
        (change)="changeFile($event)"
      />
        <div *ngIf="showFlag">
            <stl-model-viewer style="width: 100%;height: 400px;display: block;"  [stlModelFiles]="stlModelFiles"></stl-model-viewer>
        </div>

component.ts

clickFile($event: Readonly<Event>): void {
    this.showFlag = false;
  }

  changeFile($event: Readonly<Event>): void {

    const element = $event.currentTarget as HTMLInputElement;
    let fileList: FileList | null = element.files;

    if (!fileList || fileList.length === 0) {
      return;
    }

    if (fileList) {
      console.log("FileUpload -> files", fileList);
      let f = fileList[0];
      const r = new FileReader();

      r.onloadend = (e) => {
        const res = r.result;
        if (typeof res === "string") {
          const fs: string = res;
          const tmp: string[] = [];
          tmp.push(fs);

          this.stlModelFiles = tmp;
          this.showFlag = true;
        }
      };

      r.readAsBinaryString(f);
    }
  }

  renderer = new THREE.WebGLRenderer({ antialias: true })
  camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15)
  controls = new OrbitControls(this.camera, this.renderer.domElement)
  scene = new THREE.Scene()
  light = new THREE.PointLight(0xffffff, 80);

  constructor(public changeDetectorRef: ChangeDetectorRef) {}

  ngOnInit(): void {
    console.log(this.controls)
    this.renderer.setPixelRatio(window.devicePixelRatio)
    this.renderer.shadowMap.enabled = true

    this.camera.position.set(3, 3, 3)
    this.light.position.set(1, 1, 2)

    this.scene.background = new THREE.Color(0xffffff)

    this.controls.enableZoom = true;
    this.controls.minDistance = 1;
    this.controls.maxDistance = 7;

    this.controls.update();
  }
KillerCodeMonkey commented 1 month ago

but this is then a threejs controls issue. i can not reproduce it in firefox and chrome with our live demo.

So just check the OrbitControls and make some changes to solve it :)