How to extract 3d model from local machine

Questions
1

I want to load gltf and obj file from local machine and render it on scene

2

A web application can’t just load files from a local directory. However, you can use the same approach like the three.js editor which is based on the FileReader API.

1 Like
3 
gltfUploader.addEventListener( 'change', async (e) => {

    let file = e.target.files[ 0 ];
    let reader = new FileReader();

    // This is code that runs after reader.readAsText() finishes
    reader.onload = function ( gltfText ) {

        var loader = new THREE.GLTFLoader();

        loader.parse( gltfText, '', function( gltf ){

          scene.add( gltf.scene );
          renderer.render( scene, camera );

        }, function( errormsg ){
            console.error( errormsg );
        });    

    });

    reader.readAsText( file );

i found this solution on stack overflow . but it is not working. please help me out with this
Thank you

4

What does that mean? Do you get any runtime errors or warnings?

5

Yes, Error
‘ArrayBuffer’ is not assignable to type ‘string’

6

That’s how it’s done in the editor:

2 Likes
7

Now I am able to extract 3d file locally.

Really Helpful

Thank you @prisoner849 and @Mugen87

2 Likes
8

reader.addEventListener( ‘load’, function ( event ) {

      var contents = event.target.result;

      console.log(contents);

      

      var object = new OBJLoader().parse(contents)

       object.parse(contents)      **Error**

       object.name = filename;

      

    }, false );

    reader.readAsText( file );

i am able to upload glb file locally but facing problem in parsing obj file please help me with this

9

Why do you call parse() two times? Try to remove the line object.parse(contents).

10

Sorry my mistake…
But i corrected code but still facing same issue error.

Error: Argument of type ‘string | ArrayBuffer’ is not assignable to parameter of type ‘string’.

11

You have to parse the data to JSON before calling ObjectLoader.parse:

var data = JSON.parse( contents );
var object = new OBJLoader().parse( data ) ;
12

getting same error
Error: Argument of type ‘string | ArrayBuffer’ is not assignable to parameter of type ‘string’.

with JSON.parse(contents)

13

Then please show with a live example what you are doing. Or share your code as a GitHub repo.

14

Found solution:
var object = new OBJLoader().parse(contents.toString())