JSFiddle - React, Tailwind, and code Playground

by taeeun

HTML

<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> - Standard Material Reflectivity (reflectance at F0) example by <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.</div>

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/HDRCubeTextureLoader.js"></script>

<script src="https://threejs.org/examples/js/WebGL.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/MaskPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/ConvolutionShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/ConvolutionShader.js"></script>
<script src="https://threejs.org/examples/js/loaders/J3DLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="https://threejs.org/examples/js/shaders/FresnelShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>

CSS

body {
  color: #fff;
  font-family: Monospace;
  font-size: 13px;
  text-align: center;
  background-color: #000;
  margin: 0px;
  overflow: hidden;
}

a {
  color: #88f
}

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

JavaScript

if (WEBGL.isWebGLAvailable() === false) {
  document.body.appendChild(WEBGL.getWebGLErrorMessage());
}
var container, containerWidth, containerHeight, stats;
var params = {
  projection: 'normal',
  autoRotate: true,
  //            reflectivity: 1.0,
  ringcolor: '#ffffff',
  //            exposure: 1.0,
  gemColor: '#ffffff',
  roughness: 0.0,
  metalness: 0.0,
  ka: 0.17,
  hue: 0.121,
  saturation: 0.73,
  lightness: 0.66,
  lhue: 0.04,
  lsaturation: 0.01,
  llightness: 1.0,
  lx: 0.32,
  ly: 0.39,
  lz: 0.7,
  ka2: 0.17,
  hue2: 0.121,
  saturation2: 0.73,
  lightness2: 0.66,
  lhue2: 0.04,
  lsaturation2: 0.01,
  llightness2: 1.0,
  lx2: 0.32,
  ly2: 0.39,
  lz2: 0.7,
  bloomStrength: 0.19,
  bloomThreshold: 0.92,
  bloomRadius: 1
};
var camera, scene, scene2, renderer, objects = [];
var gemBackMaterial, gemFrontMaterial, RingMaterial;
var clock = new THREE.Clock();
var composer;
init();
animate();

function init() {
  container = document.createElement('div');
  containerWidth = container.clientWidth;
  containerHeight = container.clientHeight;
  document.body.appendChild(container);
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 2000);
  camera.position.set(0.0, 0, 15 * 3.5);

  scene = new THREE.Scene();

  image = new THREE.CubeTextureLoader()
    .load([
      'https://i.postimg.cc/gjdsDR94/px.jpg',
      'https://i.postimg.cc/MZbdGsRL/pz.jpg',
      'https://i.postimg.cc/508pLgr6/py.jpg',
      'https://i.postimg.cc/q7PjNSjP/ny.jpg',
      'https://i.postimg.cc/kGcch4qC/nz.jpg',
      'https://i.postimg.cc/N09dfB78/nx.jpg',

    ]);

  scene.background = image;

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xffffff);
  container.appendChild(renderer.domElement);

  renderScene = new THREE.RenderPass(scene, camera);

  effectFXAA = new...