JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

console.clear();
import * as THREE from 'https://cdn.skypack.dev/[email protected]';
import {
  OrbitControls
} from 'https://cdn.skypack.dev/[email protected]/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);
  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).setLength(20);

  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']);

  //scene.background = textureCube;

  let shape = new THREE.Shape([
    [1, 0],
    [5, 0],
    [5, 1],
    [1, 1]
  ].map(p => {
    return new THREE.Vector2(p[0], p[1])
  }));

  let geometry = new THREE.ExtrudeGeometry(shape, {
    steps: 50,
    depth: 2,
    bevelEnabled: false,
    curveSegments: 100
  });
  geometry.translate(0, 0, -1);
  geometry.rotateY(-Math.PI * 0.5);

  let v = new THREE.Vector3();
  let n = new THREE.Vector3(0, 1, 0);
  let pos = geometry.attributes.position;
  let nor = geometry.attributes.normal;
  for (let i = 0; i < pos.count; i++) {

    v.fromBufferAttribute(pos, i);
    let a = Math.PI * v.x;
    v.setX(0).applyAxisAngle(n, a);
    pos.setXYZ(i, v.x, v.y, v.z);

    v.fromBufferAttribute(nor, i);
    v.applyAxisAngle(n, a);
    nor.setXYZ(i, v.x, v.y, v.z);

  }


  let uniforms =...