JSFiddle - React, Tailwind, and code Playground

by Seokjun Hong

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js"></script>
<canvas id="test" width="640" height="480"></canvas>
<video id="video" width="640" height="480"></video>

CSS

video,
canvas#test {
  display: none;
}

JavaScript

var video = document.getElementById('video'),
  canvas = document.getElementById('test'),
  ctx = canvas.getContext('2d');

var cube, scene, camera, renderer, geometry, material, bgScene, bgCamera, bgTexture, bgMesh, bgMat, bgPlane;

var width = 640;
var height = 480;

(function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, width / height, 1, 10000);
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  bgTexture = new THREE.Texture(canvas);
  bgTexture.minFilter = THREE.NearestFilter;
  bgTexture.magFilter = THREE.NearestFilter;
  bgTexture.format = THREE.RGBFormat;
  bgTexture.wrapS = THREE.ClampToEdgeWrapping;
  bgTexture.wrapT = THREE.ClampToEdgeWrapping;

  bgMat = new THREE.MeshBasicMaterial({
    map: bgTexture,
    overdraw: true
  });
  bgPlane = new THREE.PlaneGeometry(640, 480);
  bgMesh = new THREE.Mesh(bgPlane, bgMat);
  scene.add(bgMesh);

  geometry = new THREE.BoxGeometry(50, 50, 50, 10, 10, 10);
  material = new THREE.MeshBasicMaterial({
    color: 0xfffff,
    wireframe: true
  });
  cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  camera.position.z = 310;

  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  if (navigator.getUserMedia) {
    videoLoader();
    render();
  }
})();

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

  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    if (bgTexture) bgTexture.needsUpdate = true;
  }
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(300, 150);
  ctx.stroke();
}

function videoLoader() {
  navigator.getUserMedia({
      video: true
    },
    function(stream) {
      if (window.webkitURL) {
        video.src = window.webkitURL.createObjectURL(stream);
      }...