Convert 3d model in threejs scene to png image

Questions
, ,
1

Hi everyone,
I’m trying to convert an uploaded stl file into an image with png extension. I have written a code that only captures the scence, but the image is not showing. I don’t know why the image is not displayed.
Here is a piece of the codes:

var canvas = document.getElementsByTagName('canvas')[0];
  var dataURL = canvas.toDataURL('image/png');
  var imgSrc = dataURL.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
  console.log({dataURL});
  var image = imgSrc;

The code above only captures the scene without showing the image.
If I use imgSrc.png, it gives me error.

Can anyone help me with this please.

2

Does this answer your question?

3

Thanks for replying.
Unfortunately, I’m still getting the same result.

4

Thanks man.

I’ve just fixed it. I think because I forgot to render the scene camera that’s why it didn’t work at first.

1 Like
5

Is it possible to get only the content (the image) in the scene without the scence background appearing?

6

To remove the background for rendering the image, change the scene.background color to an rgba value 0,0,0,0 before renderer.render(scene camera);
Make sure you set canvas to transparent to start with though:

        const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });

After saving the blob, change the scene.background = ; back to your original setting and call renderer.render(scene, camera); to update.

Unless you don’t want the background after the image is loaded, then don’t call the second scene.background = ;

7

Thanks, Timmy. This is helpful, I will try it out straightaway

8

Hello, Please check out my solution: this will be an effective way to capturing image. newPosition is the position of the camera.
export function captureAndUploadImages(newPosition) {
return new Promise((resolve, reject) => {
camera.position.set(newPosition.x, newPosition.y, newPosition.z);

    requestAnimationFrame(() => {
        renderer.render(scene, camera);
        const imgDataUrl = renderer.domElement.toDataURL();
        *// use the image data or upload it to the backend*
    });
});

}
If you need more questions or have problems please contact me on mkafhb@gmail.com