JSFiddle - React, Tailwind, and code Playground

by sean3200

HTML

<script src="http://www.html5canvastutorials.com/libraries/pre3d/pre3d.js"></script>
 <script src="http://www.html5canvastutorials.com/libraries/pre3d/pre3d_shape_utils.js"></script>
 <script src="http://www.html5canvastutorials.com/libraries/pre3d/demo_utils.js">
 </script>
 <script src="http://www.noowav.com/scriptfiles/pre3d_path_utils.js">
        </script>
      
    <body>
<div id="toolbar"></div>
<div class="centeredDiv">
<canvas id="canvas" width="800" height="600">
  Sorry, this demo requires a web browser which supports HTML5 canvas!
</canvas>
</div>
        <video id="myvid" >
              <source src="http://studio.html5rocks.com/samples/video-player/chromeicon.webm" type="video/vp8" />  
              <source src="http://studio.html5rocks.com/samples/video-player/chromeicon.mp4" type="video/mp4" /> 
              <source src="http://studio.html5rocks.com/samples/video-player/chromeicon2.ogv" type="video/ogg" />
           </video>


<table>
<tr><td>Mouse</td><td>&rarr;</td><td>rotate around origin x and y axis</td></tr>
<tr><td>Mouse + ctrl</td><td>&rarr;</td><td>pan x / y</td></tr>
<tr><td>Mouse + shift</td><td>&rarr;</td><td>pan z</td></tr>
<tr><td>Mouse + ctrl + shift</td><td>&rarr;</td><td>adjust focal length</td></tr>
</table>

CSS

<style type="text/css">
        <style>
  body * {
    font-family: sans-serif;
    font-size: 14px;
  }
  body.white {
    background-color: white;
    color: black;
  }
        </style>

JavaScript

// (c) Dean McNamee <dean@gmail.com>.  All rights reserved.

function start3d(document.getElementsByTagName ('video')[0]) {
  var screen_canvas = document.getElementById('canvas');
  var renderer = new Pre3d.Renderer(screen_canvas);

  var cube = Pre3d.ShapeUtils.makeCube(1);
  // Avoid anti-aliasing cracks along quad faces.  We convert to triangles so
  // that overdraw with overlap the textures along the edges.
  Pre3d.ShapeUtils.triangulate(cube);

  var w = document.getElementsByTagName ('video').width;
  var h = document.getElementsByTagName ('video').height;

  var texinfo1 = new Pre3d.TextureInfo();
  texinfo1 = document.getElementsByTagName ('video');
  texinfo1.u0 = 0;
  texinfo1.v0 = 0;
  texinfo1.u1 = 0;
  texinfo1.v1 = h;
  texinfo1.u2 = w;
  texinfo1.v2 = h;

  var texinfo2 = new Pre3d.TextureInfo();
  texinfo2 = document.getElementsByTagName ('video');
  texinfo2.u0 = 0;
  texinfo2.v0 = 0;
  texinfo2.u1 = w;
  texinfo2.v1 = h;
  texinfo2.u2 = w;
  texinfo2.v2 = 0;

  function selectTexture(quad_face, quad_index, shape) {
    // Each face is two triangles, the newly triangulated triangles last.
    renderer.texture = quad_index < 6 ? texinfo1 : texinfo2;
    return false;
  }

  renderer.quad_callback = selectTexture;

  // We don't want to fill, it will show at the edges (and waste cpu).
  renderer.fill_rgba = null;

  var state = {
    cube_rotate_y_rad: 0,
    cube_rotate_x_rad: 0,
    cube_x: 2,
    cube_y: 0
  };

  function draw() {
    renderer.transform.reset();
    renderer.transform.rotateX(state.cube_rotate_x_rad);
    renderer.transform.rotateY(state.cube_rotate_y_rad);
    renderer.transform.translate(state.cube_x, state.cube_y, -4);
    renderer.bufferShape(cube);

    // White background.
    renderer.ctx.setFillColor(1, 1, 1, 1);
    renderer.drawBackground();

    renderer.drawBuffer();
    renderer.emptyBuffer();
  }

  renderer.camera.focal_length = 2.5;
  DemoUtils.autoCamera(renderer, 0, 0, -8, 0, 0, 0, draw);

  function...