JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<h4>Render 3D model to transparant PNG</h4>

<img id="example" src="" alt="rendered transparent image/png" />

CSS

body {
  background: url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg')
}

img#example {
  border: 1px dashed red;
}

JavaScript

//By @tojans http://tojans.me

"use strict";
new THREE.OBJLoader().load("https://threejs.org/examples/obj/male02/male02.obj", function(object) {
  object.rotation.x = Math.PI
  var png = renderToPng(object, 200);
  document.querySelector("img#example").src = png
})

function renderToPng(mesh, maxSize) {
  var camera, scene, bb, renderer, w, h, f, light;
  scene = new THREE.Scene();
  scene.add(mesh);
  bb = new THREE.Box3().setFromObject(scene).expandByScalar(10);
  camera = new THREE.OrthographicCamera(bb.min.x, bb.max.x, bb.min.y, bb.max.y, bb.min.z, bb.max.z);
  light = new THREE.DirectionalLight();
  light.position.z = bb.min.z;
  scene.add(camera);
  scene.add(light);
  renderer = new THREE.WebGLRenderer({
    alpha: true
  });
  w = bb.max.x - bb.min.x;
  h = bb.max.y - bb.min.y;
  f = maxSize / (w > h ? w : h);
  renderer.setSize(w * f, h * f);
  renderer.render(scene, camera);
  return renderer.domElement.toDataURL("image/png");
}