JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

console.clear();
import * as THREE from 'https://threejs.org/build/three.module.js';
import { GUI } from 'https://threejs.org/examples/jsm/libs/dat.gui.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

let camera, scene, renderer;

let clock = new THREE.Clock();
init();
renderer.setAnimationLoop(render);

function init() {

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

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );

  camera.position.set( 0, 2.5, 3.0 ).multiplyScalar(10);

  let controls = new OrbitControls( camera, renderer.domElement );
  controls.enablePan = false;

  let light = new THREE.HemisphereLight( 0xffffff, 0x080808, 1.5 );
  light.position.set( - 1.25, 1, 1.25 );
  scene.add( light );
  
  let loader = new THREE.CubeTextureLoader();
  loader.setPath( 'https://threejs.org/examples/textures/cube/Bridge2/' );

  let textureCube = loader.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
  //textureCube.encoding = THREE.sRGBEncoding;
  
  //scene.background = textureCube;

  let geometry = new THREE.CylinderGeometry( 3, 3, 2, 32, 100 );
  geometry.rotateZ(Math.PI * -0.5);
  geometry.translate(0, 0, -10);

  let uniforms = {
    revealVal: {value: 0.65}
  }

  const material = new THREE.MeshLambertMaterial( {
    color: 0xffff00,
    envMap: textureCube,
    onBeforeCompile: shader => {
      shader.uniforms.revealVal = uniforms.revealVal;
      shader.vertexShader = `
      	uniform float revealVal;
        
        // https://gist.github.com/yiwenl/3f804e80d0930e34a0b33359259b556c
        mat4 rotationMatrix(vec3 axis, float angle) {
            axis = normalize(axis);
        ...