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/three@0.134.0';
import { GUI } from 'https://cdn.skypack.dev/three@0.134.0/examples/jsm/libs/dat.gui.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.134.0/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 shape = new THREE.Shape();
  shape.absarc(10, 0, 3, Math.PI * 0.5, Math.PI * 1.5);
  shape.absellipse(10, 0, 1.5, 3, Math.PI * 1.5, Math.PI * 0.5, true);
  
  let geometry = new THREE.ExtrudeGeometry( shape, {steps: 100, depth: 2, bevelEnabled: false, curveSegments: 100} );
  geometry.translate(0, 0, -1);
  geometry.rotateY(Math.PI * 0.5);
  
  console.log(geometry);
	

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

  const materialSide = new THREE.MeshStandardMaterial( {
  	roughness: 0.125,
    metalness: 0.875,
    color: 0xffff00,
    envMap: textureCube
  } );
...