Convert Current Frame / Canvas to Image

[Robinnnnn]

I have a React3 scene that maps a panorama onto a sphereGeometry.

I would like a user to be able to pan to their intended view and save a thumbnail, like so:

I have used canvas.toDataURL for converting the canvas view into an appropriate format for uploading to S3. Unfortunately, this simply ends up in a black image.

This StackOverflow post suggests that the WebGLRenderer must be initialized using the {preserveDrawingBuffer: true} setting. However, I am unable to apply this setting in the context of using the react-three-renderer library.

The react-three library apparently provides the ability to pass custom renderer props specifically for this purpose, but again, I'm not sure how this can be applicable to my app. Here's the basic layout of my scene:

<React3>
  <scene>
    <perspectiveCamera/>
    <object3D>
      {
        panoMeshes.map((face, i) => (
          <mesh
            key={i}
            position={face.position}
            rotation={face.rotation}
          >
            <sphereGeometry />
            <meshBasicMaterial>
              <texture
                key={i}
                onLoad={this.handleOnLoad}
                url={this.applyPanoFace(i)} // Pano images are loaded in as texture
              />
            </meshBasicMaterial>
          </mesh>
        ))
      }
    </object3D>
  </scene>
</React3>

Any help as to how I can pass {preserveDrawingBuffer: true} to the renderer would be much appreciated. Better yet, is there a better way to take a screenshot of the canvas view?

[toxicFork]

Ah I see, yes that feature is missing and needs to be implemented. I'll bundle it up with a few other fixes and try to release it... I am unfortunately not sure of taking screenshots in other ways as I had not tried it, but once the next version is ready it should resolve this case :)

[Robinnnnn]

Wow... preserveDrawingBuffer already exists as an attribute for the React3 component. Just flagging this as true got me what I wanted :)

Thanks so much!

[toxicFork]

Huh... The time machine works!

On Wed, Oct 11, 2017, 16:10 Robinnnnn notifications@github.com wrote:

Wow... preserveDrawingBuffer already exists as an attribute https://github.com/toxicFork/react-three-renderer/wiki/Entry-Point#preservedrawingbuffer for the React3 component. Just flagging this as true got me what I wanted :)

Thanks so much!

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/toxicFork/react-three-renderer/issues/199#issuecomment-335843800, or mute the thread https://github.com/notifications/unsubscribe-auth/AA0iLRWwu9nQJyo4z2lqCcEp3HG5fwmeks5srNqBgaJpZM4P0rEk .