JSFiddle - React, Tailwind, and code Playground

by SSopin

HTML

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.156/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.156/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 { 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;

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, 0.00000001, 1);
  camera.position.set(0, 0.02, -0.015);

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

	renderPass = new RenderPass(scene, camera);
  outputPass = new OutputPass();
  outputPass.enabled = false;
  
  composer.addPass(renderPass);
  composer.addPass(outputPass);
  
  // HDR
  const hdrLoader = new RGBELoader();
  const environment = await hdrLoader.loadAsync('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();
  const gltf = await loader.loadAsync('https://rawcdn.githack.com/SSopin/temp/756f03ddbce85bb6f3a484db91276200c6b4f121/OutputPassTest.glb');
  camera.lookAt(gltf.scene.position);
  scene.add(gltf.scene);
  
 ...