JSFiddle - React, Tailwind, and code Playground

by mmalex

HTML

<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<img id="image" src="" />

CSS

html,
      body {
          padding: 0px;
          margin: 0px;
      }

      canvas {
          width: 100%;
          height: 100%;
      }

      #clickButton {
          position: absolute;
          top: 10px;
          left: 10px;
          z-index: 2;
          cursor: pointer;
      }

      #image {
          position: absolute;
          top: 10px;
          right: 10px;
          max-width: 150px;
          width: 150px;
          height: 90px;
          z-index: 3;
          border: 1px solid #fff;
      }

JavaScript

var camera, scene, renderer;
var mesh;
var strDownloadMime = "image/octet-stream";

init();
animate();

function init() {

    var saveLink = document.createElement('div');
    saveLink.style.position = 'absolute';
    saveLink.style.top = '10px';
    saveLink.style.width = '100%';
    saveLink.style.background = '#FFFFFF';
    saveLink.style.textAlign = 'center';
    saveLink.innerHTML =
        '<button href="#" id="clickButton">Save Frame</button>';
    document.body.appendChild(saveLink);
    // document.getElementById("saveLink").addEventListener('click', saveAsImage);
    renderer = new THREE.WebGLRenderer({
        preserveDrawingBuffer: true,
        captureId
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    //

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;

    scene = new THREE.Scene();

    var geometry = new THREE.BoxGeometry(200, 200, 200);

    var captureId = document.getElementById('image');
    // var renderer = new Three.WebGLRenderer({captureId});


    var material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
    });

    mesh = new THREE.Mesh(geometry, material);
	mesh.name = "mesh01";
    scene.add(mesh);
    console.log(captureId);


    window.addEventListener('resize', onWindowResize, false);

    document.getElementById('clickButton').addEventListener('click', buttonClick);
	
document.getElementById('image').addEventListener('click', imageClick);

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

    requestAnimationFrame(animate);

    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;

    renderer.render(scene, camera);

}

function buttonClick()
{
    renderer.render(scene, camera);

    let imageEl =...