JSFiddle - React, Tailwind, and code Playground

by SSopin

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;
let loader;


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.shadowMap.enabled = true;

  // Setting max to 2 due to performance considerations.
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setSize(w, h);
  
  document.body.appendChild(renderer.domElement);
    
  scene = new THREE.Scene()
  
  camera = new THREE.PerspectiveCamera(40, w / h, 0.001, 1);
  camera.position.set(0, 0.02, -0.015);

  
  orbit = new OrbitControls(camera, renderer.domElement);
  
  // POST PROCESSING

  composer = new EffectComposer(renderer);

  outputPass = new OutputPass();
  
  SSAA = new SSAARenderPass(scene, camera, 0x000000, 0);
  SSAA.sampleLevel = 4;
  
  renderPass = new RenderPass(scene, camera);
  
  composer.addPass(renderPass);
  composer.addPass(SSAA);
  composer.addPass(outputPass);
  SSAA.enabled = false;
  
  // 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 =...