JSFiddle - React, Tailwind, and code Playground

by Thanos Saringelos

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
  THREE.Reflector = function(geometry, options) {

    THREE.Mesh.call(this, geometry);

    this.type = 'Reflector';

    var scope = this;

    options = options || {};

    var color = (options.color !== undefined) ? new THREE.Color(options.color) : new THREE.Color(0x7F7F7F);
    var textureWidth = options.textureWidth || 512;
    var textureHeight = options.textureHeight || 512;
    var clipBias = options.clipBias || 0;
    var shader = options.shader || THREE.Reflector.ReflectorShader;
    var recursion = options.recursion !== undefined ? options.recursion : 0;

    //

    var reflectorPlane = new THREE.Plane();
    var normal = new THREE.Vector3();
    var reflectorWorldPosition = new THREE.Vector3();
    var cameraWorldPosition = new THREE.Vector3();
    var rotationMatrix = new THREE.Matrix4();
    var lookAtPosition = new THREE.Vector3(0, 0, -1);
    var clipPlane = new THREE.Vector4();
    var viewport = new THREE.Vector4();

    var view = new THREE.Vector3();
    var target = new THREE.Vector3();
    var q = new THREE.Vector4();

    var textureMatrix = new THREE.Matrix4();
    var virtualCamera = new THREE.PerspectiveCamera();

    var parameters = {
      minFilter: THREE.LinearFilter,
      magFilter: THREE.LinearFilter,
      format: THREE.RGBFormat,
      stencilBuffer: false
    };

    var renderTarget = new THREE.WebGLRenderTarget(textureWidth, textureHeight, parameters);

    renderTarget.depthBuffer = true;
    renderTarget.depthTexture = new THREE.DepthTexture();
    renderTarget.depthTexture.type = THREE.UnsignedShortType;

    if (!THREE.Math.isPowerOfTwo(textureWidth) || !THREE.Math.isPowerOfTwo(textureHeight)) {

      renderTarget.texture.generateMipmaps = false;

    }

    var material = new THREE.ShaderMaterial({
      uniforms:...

CSS

body {
	  margin: 0;
}

JavaScript

let camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 20);
  camera.position.set(0, 3, 3);

  scene = new THREE.Scene();

  const boxGeometry = new THREE.BoxGeometry();
  const boxMaterial = new THREE.MeshNormalMaterial();

  const box = new THREE.Mesh(boxGeometry, boxMaterial);
  box.position.y = 0.5;
  scene.add(box);

  //

  const reflectorGeometry = new THREE.PlaneBufferGeometry(8, 8);
  const reflector = new THREE.Reflector(reflectorGeometry, {
    textureWidth: 1024 * window.devicePixelRatio,
    textureHeight: 1024 * window.devicePixelRatio,
    color: 0x889999,
    transparent: true,
    opacity: 0.4,
    recursion: 1
  });

  reflector.rotation.x = Math.PI * -0.5;
  reflector.position.y = -0.01;

  scene.add(reflector);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const controls = new THREE.OrbitControls(camera, renderer.domElement);


  var xAxis = new THREE.Geometry();
  xAxis.vertices.push(
    new THREE.Vector3(1000, 0, 0),
    new THREE.Vector3(0, 0, 0)
  );

  var yAxis = new THREE.Geometry();
  yAxis.vertices.push(
    new THREE.Vector3(0, 1000, 0),
    new THREE.Vector3(0, 0, 0)
  );

  var zAxis = new THREE.Geometry();
  zAxis.vertices.push(
    new THREE.Vector3(0, 0, 1000),
    new THREE.Vector3(0, 0, 0)
  );

  var xAxisLine = new THREE.Line(xAxis, new THREE.LineBasicMaterial({
    color: "#ADFF2F"
  }));
  var yAxisLine = new THREE.Line(yAxis, new THREE.LineBasicMaterial({
    color: "#FF0000"
  }));
  var zAxisLine = new THREE.Line(zAxis, new THREE.LineBasicMaterial({
    color: "#0000FF"
  }));
  //
  scene.add(xAxisLine);
  scene.add(yAxisLine);
  scene.add(zAxisLine);

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene,...