Uploading CAD models to Three JS from client side for display

Questions
1

Currently I am loading 3mf files into three js using the following code where I manually specify the location of the 3mf file on my flask server in the partFilepath variable:

                const manager = new THREE.LoadingManager();
                const loader = new ThreeMFLoader( manager );
                loader.load( partFilepath, function ( object ) {
                    object.quaternion.setFromEuler( new THREE.Euler( - Math.PI / 2, 0, 0 ) );   // z-up conversion
                    scene.add( object);
                } );
                manager.onLoad = function () {
                    render();
                };

My goal is to allow the user to upload their own 3mf file which automatically gets rendered into their browser. My first idea was to let the user POST their file to flask backend where it saves it and then loads the file into the frontend, but that would take too long to render on the client’s browser especially if the file is too big. I want to understand how I could let the user upload the model directly into the browser for rendering without having to using the backend?

2

You can use the same approach like the three.js editor.

Meaning you use a file input or drag’n’drop to load the asset into the browser. The file objects you retrieve in your code can be processed with the FileReader API. For more information I suggest you study the respective code in the editor. The Loader class might be a good starting point. Below, you can see how 3MF files are processed:

1 Like