Screenshot.ts

import * as THREE from 'three'

const vertexShader = `
varying vec2 vUv;

void main() {
  gl_Position = vec4(position.xy * 2., 1.0, 1.0);
  vUv = uv;
}
`

const fragmentShader = `
varying vec2 vUv;
uniform sampler2D uTexture;

void main() {
  vec4 texel = texture2D(uTexture, vUv);
  texel.a = 1.;
  gl_FragColor = texel;
}
`

export default class Screenshot {
  private mesh: THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial>
  private renderer: THREE.WebGLRenderer
  private uselessCamera: THREE.Camera = new THREE.OrthographicCamera()

  constructor(renderer: THREE.WebGLRenderer) {
    this.mesh = new THREE.Mesh(
      new THREE.PlaneBufferGeometry(),
      new THREE.ShaderMaterial({ fragmentShader, vertexShader, uniforms: { uTexture: { value: null } } })
    )
    this.renderer = renderer
  }

  public capture(
    texture: THREE.Texture,
    { name = 'preview', size: overrideSize = {} }: { name?: string; size?: { width?: number; height?: number } } = {}
  ) {
    const size = new THREE.Vector2()
    const autoClear = this.renderer.autoClear
    this.renderer.getSize(size)
    this.renderer.autoClear = false
    this.renderer.setSize(overrideSize.width || texture.image.width, overrideSize.height || texture.image.height)
    this.mesh.material.uniforms.uTexture.value = texture
    this.renderer.render(this.mesh, this.uselessCamera)

    const imageURL = this.renderer.domElement.toDataURL('image/png')
    this.renderer.setSize(size.x, size.y)
    this.renderer.autoClear = autoClear

    var anchor = document.createElement('a')
    anchor.href = imageURL
    anchor.download = `${name}.png`
    anchor.click()
  }
}