1

How To get 2d Snapshot of Three.js 3D Scene ?? I need to get 2D Snapshot of my 3D scene like a panoramic image.(Full 360 snapshot)

Demo Used:- http://patcat.com/demos/VRWeatherParticles/

I tried this solution :- 1.How do you save an image from a Three.js canvas? 2. Three.js: How can I make a 2D SnapShot of a Scene as a JPG Image?

When i do (what mentioned in Link 2):- 

renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true
});

var strMime = "image/jpeg";
imgData = renderer.domElement.toDataURL(strMime);
imgData1 = renderer.domElement.toDataURL();

I am getting the String base64, but i am not able to decode (used online tools [http://codebeautify.org/base64-to-image-converter]) it properly. Only Black Image is coming up.

Please let me know how to get :- 2D Snapshot of my 3d scene like a panoramic image.

NOTE:- Similar Question should have worked, but it is not working for me.

Community
  • 1
  • 1
kautuksahni
  • 309
  • 3
  • 22
  • 1
    This might be helpfu http://stackoverflow.com/a/26790802/128511 also if you want to convert it to a PNG you need to split at the comma as in `binary = someBase64ToBinaryFunction(dataUrl.split(",")[1])`; – gman Aug 11 '16 at 21:08
  • Thankyou gman. This would help. Other part of my question is :- To capture 360 Scene in 2D Image. Can you help me in this? – kautuksahni Aug 12 '16 at 06:16
  • @kautuksahni: can you please create a jsfiddle or codepen sample? – Shiva Aug 12 '16 at 06:24
  • 2
    I'm guessing this is what you want. https://github.com/spite/THREE.CubemapToEquirectangular – gman Aug 13 '16 at 06:03
  • @gman Thank you, this is what i was looking for. Really appreciate your help. – kautuksahni Aug 16 '16 at 04:43
  • @gman Hi, is there a way by which i can map camera direction in 3D scene to 2d image generated from CubemapToEquirectangular? I mean, can we tell which part of 3D scene is in 2D image. Something like 3D coordinates to 2D coordinates ? – kautuksahni Aug 30 '16 at 04:20

1 Answers1

3

Solution is suggested to me by Gman . I am shearing it with community for their benefit.

"CubemapToEquirectangular" library helps as in getting panoramic image of 3D scene.

Link:- https://github.com/spite/THREE.CubemapToEquirectangular

Demo Solution:- https://www.clicktorelease.com/tools/CubemapToEquirectangular/index-managed.html

Thanks and Regards

Kautuk Sahni

Community
  • 1
  • 1
kautuksahni
  • 309
  • 3
  • 22