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.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.155.0/examples/jsm/"
}
}
</script>
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 { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { CopyShader } from 'three/addons/shaders/CopyShader.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader';
let renderer, camera, scene, orbit;
let composer, renderPass, gammaCorrection, SSAA;
let mesh, ground, hemi, light;
let loader;
let init = () => {
const w = window.innerWidth;
const h = window.innerHeight;
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
logarithmicDepthBuffer: true,
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.5;
renderer.shadowMap.enabled = true;
renderer.useLegacyLights = false;
// Setting max to 2 due to performance considerations.
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(w, h);
renderer.setClearColor(0xDDDDDD);
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);
composer.setSize(w, h);
gammaCorrection = new ShaderPass(GammaCorrectionShader);
SSAA = new SSAARenderPass(scene, camera, 0x000000, 0);
SSAA.setSize(w, h);
SSAA.unbiased = true;
SSAA.sampleLevel = 5;
renderPass = new...