JSFiddle - React, Tailwind, and code Playground

HTML

<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.155/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.155/examples/jsm/"
    }
  }
</script>

CSS

body {
  margin: 0;
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { SSAARenderPass } from 'three/addons/postprocessing/SSAARenderPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader';

let renderer, camera, scene, orbit;
let composer, renderPass, outputPass, SSAA;

async function init() {

  const w = window.innerWidth;
  const h = window.innerHeight;

  const renderer = new THREE.WebGLRenderer();
  renderer.outputColorSpace = THREE.SRGBColorSpace;
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 1.5;

  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(w, h);
  
  document.body.appendChild(renderer.domElement);
    
  scene = new THREE.Scene()
  
  camera = new THREE.PerspectiveCamera(40, w / h, 1, 1000);
  camera.position.set(0, 5, -10);
  
  orbit = new OrbitControls(camera, renderer.domElement);
  
  // POST PROCESSING

  composer = new EffectComposer(renderer);
  
  renderPass = new RenderPass(scene, camera);
  renderPass.enabled = false

  SSAA = new SSAARenderPass(scene, camera);
  SSAA.sampleLevel = 4;
  
	outputPass = new OutputPass();
  
  composer.addPass(renderPass);
  composer.addPass(SSAA);
  composer.addPass(outputPass);
  
  // HDR
  const hdrLoader = new RGBELoader();
  
  console.log("Loading Texture");

  const environment = hdrLoader.load('https://threejs.org/examples/textures/equirectangular/royal_esplanade_1k.hdr');
  
  environment.mapping = THREE.EquirectangularReflectionMapping;    
  scene.background = environment;
  scene.environment = environment;
  
  //GLTF
  const loader = new GLTFLoader();

  let url =...