Facing this issue in console

Questions
, ,
1

Getting this issue, Actually iam trying to upload a 3d file and wanted to see in angular app.

image
image929×271 23.3 KB

Code :


import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
import { Engine, SceneLoader, Scene } from '@babylonjs/core';
import * as BABYLON from '@babylonjs/core';
import '@babylonjs/loaders';
import '@babylonjs/loaders/glTF'; // Import the glTF loader

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {
  @ViewChild('renderCanvas', { static: true }) renderCanvas!: ElementRef<HTMLCanvasElement>;
  private engine!: BABYLON.Engine;
  private scene!: BABYLON.Scene;

  ngOnInit() {
    this.engine = new BABYLON.Engine(this.renderCanvas.nativeElement, true);
    this.createScene();
    this.engine.runRenderLoop(() => {
      if (this.scene) {
        this.scene.render();
      }
    });

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

  onFileSelected(event: any) {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = () => {
        const arrayBuffer = reader.result as ArrayBuffer;
        this.loadModel(arrayBuffer, file.name);
      };
      reader.readAsArrayBuffer(file);
    }
  }

  private createScene() {
    this.scene = new BABYLON.Scene(this.engine);
    const camera = new BABYLON.ArcRotateCamera('camera', Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), this.scene);
    camera.attachControl(this.renderCanvas.nativeElement, true);
    const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(1, 1, 0), this.scene);
    this.scene.clearColor = new BABYLON.Color4(0, 0, 0, 1);
  }

  private loadModel(arrayBuffer: ArrayBuffer, fileName: string) {
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);

    // Determine the file extension
    const extension = this.getFileExtension(fileName);
    if (extension !== 'glb' && extension !== 'gltf') {
      console.error('Unsupported file format:', extension);
      URL.revokeObjectURL(url);
      return;
    }

    // Clear the scene before loading the new model
    if (this.scene) {
      this.scene.dispose();
      this.createScene();
    } else {
      console.error('Scene is not initialized');
      URL.revokeObjectURL(url);
      return;
    }

    // Debugging: Log the blob URL
    console.log('Blob URL:', url);

    // Load the model using the GLTF loader
   SceneLoader.Append(url, '', this.scene, (_scene) => {
      console.log('Model loaded');
      URL.revokeObjectURL(url);  // Clean up the URL after loading
    }, null, (_scene, message, exception) => {
      console.error('Error loading model:', message, exception);
      URL.revokeObjectURL(url);  // Clean up the URL in case of error
    });
  }

  private getFileExtension(fileName: string): string {
    return fileName.split('.').pop()?.toLowerCase() || '';
  }
}

`> Blockquote

`

2

Hello and welcome!

It seems to be a BLOB loading issue in your code. Since we can’t test your code, I would suggest you to check for similar posts, I believe you’ll find the answer how to load a BLOB quite quickly.

https://forum.babylonjs.com/search?q=load%20from%20blob

If you couldn’t help yourself after all, get back here, someone (including me) will gladly assist you and try to find the solution to your problem.

1 Like
3

I guess you need to force the file extension in the SceneLoader.Append( function in the 7th parameter cause blob are extension less

image
image1386×766 128 KB

1 Like
4

Thank you all for the responses, i have fixed the issue :

1.FilesInput Initialization:
The FilesInput class is initialized with the engine and various callbacks.
sceneLoaded and sceneError callbacks handle the successful loading and errors of the scene respectively.
startProcessingFiles clears the log cache.
2. File Handling:
The onProcessFileCallback checks for specific file extensions and handles them appropriately.
The file input change event is handled to trigger the FilesInput.loadFiles method.
3. HTML Template:

  • The file input element is given an id and is connected to the Angular component for file selection.
  • The canvas element is referenced using #renderCanvas to be used in the component.

By following these steps, I ve fixed the issue.

1 Like