Closed Swaraj55555 closed 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(); }
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 :)
HTML Code
component.ts