JSFiddle - React, Tailwind, and code Playground

by Jonathan Lurie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.js"></script>

  <div id="container"></div>

  <script src="js/three.js"></script>
  <script src="js/OrbitControls.js"></script>
  <script src="js/dat.gui.js"></script>


  <!-- FRAGMENT SHADER -->
  <script id="fragment_shader1_custom3" type="x-shader/x-fragment">

  uniform sampler2D texture;
  uniform float imageIndex;
  varying vec4 worldCoord;
  varying vec2 vUv;

  // tex is a texture with each slice of the cube placed in grid in a texture.
  // texCoord is a 3d texture coord
  // size is the size if the cube in pixels.
  // slicesPerRow is how many slices there are across the texture
  // numRows is the number of rows of slices

  vec2 computeSliceOffset(float slice, float slicesPerRow, vec2 sliceSize) {
    return sliceSize * vec2(mod(slice, slicesPerRow),
    floor(slice / slicesPerRow));
  }

  vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float size, float numRows, float slicesPerRow){

    float slice   = texCoord.z * size;
    float sliceZ  = floor(slice);                         // slice we need
    float zOffset = fract(slice);                         // dist between slices

    vec2 sliceSize = vec2(1.0 / slicesPerRow,             // u space of 1 slice
      1.0 / numRows);                 // v space of 1 slice

    vec2 slice0Offset = computeSliceOffset(sliceZ, slicesPerRow, sliceSize);
    vec2 slice1Offset = computeSliceOffset(sliceZ + 1.0, slicesPerRow, sliceSize);

    vec2 slicePixelSize = sliceSize / size;               // space of 1 pixel
    vec2 sliceInnerSize = slicePixelSize * (size - 1.0);  // space of size pixels

    vec2 uv = slicePixelSize * 0.5 + texCoord.xy * sliceInnerSize;
    vec4 slice0Color = texture2D(tex, slice0Offset + uv);
    vec4 slice1Color = texture2D(tex, slice1Offset +...

CSS

body {
    color: #ffffff;
    font-family:Monospace;
    font-size:13px;
    text-align:center;
    font-weight: bold;

    background-color: #050505;
    margin: 0px;
    overflow: hidden;
  }

  #info {
    position: absolute;
    top: 0px; width: 100%;
    padding: 5px;
  }

  a {
    color: #ffffff;
  }

JavaScript

var container;
  var camera, scene, renderer;
  var uniforms;
  var clock = new THREE.Clock();
  var globalCounter = 0;
  var tileNumber = 64;
  var PI = Math.PI;

  var guiVar = {
    posx: 0.5,
    posy: 0.5,
    posz: 0.5,
    rotx: 0.0,
    roty: 0.0,
    rotz: 0.0
  }

  var gui = new dat.GUI();
  gui.add(guiVar, 'posx', 0, 1).name("position x").step(0.001);
  gui.add(guiVar, 'posy', 0, 1).name("position y").step(0.001);
  gui.add(guiVar, 'posz', 0, 1).name("position z").step(0.001);

  gui.add(guiVar, 'rotx', -PI/2, PI/2).name("rotation x").step(0.01);
  gui.add(guiVar, 'roty', -PI/2, PI/2).name("rotation y").step(0.01);
  gui.add(guiVar, 'rotz', -PI/2, PI/2).name("rotation z").step(0.01);

  init();
  animate();

  console.log(scene.children[ 0 ]);

  function init() {
    container = document.getElementById( 'container' );
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 3000 );
    camera.position.z = 7;
    scene = new THREE.Scene();

    var geometry = new THREE.PlaneBufferGeometry( 1, 1, 1 );
    var texFile = "https://i.imgur.com/htmv5fE.jpg";

    uniforms = {
      texture:    { value: new THREE.TextureLoader().load( texFile ) }
    };


    var material = new THREE.ShaderMaterial( {
      uniforms: uniforms,
      vertexShader: document.getElementById( 'vertexShader_custom1' ).textContent,
      fragmentShader: document.getElementById('fragment_shader1_custom3' ).textContent
    });

    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(0.5, 0.5, 0.0);
    scene.add( mesh );

    var cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );

    var cubeMaterial = new THREE.MeshBasicMaterial();
    var cubeMesh = new THREE.Mesh( cubeGeometry, cubeMaterial );
    var cube = new THREE.BoxHelper( cubeMesh );
    cube.position.set(0.5, 0.5, 0.5);
    cube.material.color.set( 0x66dd66 );
    scene.add( cube );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(...