three.jswebgl

How To get 2D Snapshot [like panoramic] of whole 3D Three.js Scene?

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.

Solution

  • Solution is suggested to me by Gman . I am sharing 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