Asynchronously rendering PNG images from 3MF files using React, Node, and Three.js
Introduction: In this post, I’m going to cover how to asynchronously generate 2d images from 3D object files using React, Node, and Three.js. This is useful in situations where you might want to be able to use 2d images to represent 3D objects that have been uploaded by a user, say in a shopping cart or an order summary page.
A while back I was building out a 3D ordering portal that would allow customers to place orders for 3D printed components by uploading their own 3MF files to a a server. After the file was uploaded, the user would see a picture of the object they had uploaded, and then be presented with a series of customizable options, like what kind of material and finish they wanted, and so on.
Not really knowing much about this stuff (3D files, Three.js) at the time, I made the mistake of assuming I could just embed an instance of Three.js on the client side and use that to render a view of the 3D object after the user had uploaded it to the server. This seemed to work fine at first, but that was because I was using small example files that I had downloaded off the ‘net and they were nowhere near the size of the files that actual customers were going to upload. Once I got started trying to use larger files, like 100MB or so, the whole thing went to hell.
The problem was that not only does it take time to upload the files to the server, it also takes time for Three.js to parse those files. Since Javascript is single-threaded, a web application will end up slamming to a halt if you start a long-running CPU intensive task (like asking Three.js to parse a 100MB 3MF file). Since parsing some of these files can take minutes, the initial approach I took was definitely the wrong way to go.
So, back to the drawing board.
After kicking a few different ideas around it occurred to me that the right way to do this was to have a completely separate web site that does nothing more than use Three.js to render a 3MF file. This web site would be for internal use only and not exposed to the ‘net. Now, the user facing web app could upload a 3MF file to the API server, and then the API server could kick off a worker thread that would invoke Puppeteer to load the rendering web site, which would, in turn, use Three.js to render the relevant 3MF file. Once the rendering web site finishes up, the API server can then ask Puppeteer to take a screenshot and save the resulting 2D image file to the local file system. While the API server is doing all of this, the client web app just starts polling the API server to check if the work has been completed.
The following sequence diagram describes the final architecture:
All in all, this concept worked out pretty well and is currently being used at one of the larger 3D printing firms in North America for their customer ordering portal.
