JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/shaders/GammaCorrectionShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/SSAARenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
JavaScript
2
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;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(w, h);
renderer.setClearColor(0xDDDDDD);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene()
scene.background = new THREE.Color( 0xff0000 );
camera = new THREE.PerspectiveCamera(40, w / h, 1, 1000);
camera.position.set(0, 5, -10);
orbit = new THREE.OrbitControls(camera, renderer.domElement);
// POST PROCESSING
composer = new THREE.EffectComposer(renderer);
composer.setSize(w, h);
gammaCorrection = new THREE.ShaderPass(THREE.GammaCorrectionShader);
SSAA = new THREE.SSAARenderPass(scene, camera, 0x000000, 0);
SSAA.setSize(w, h);
SSAA.unbiased = true;
SSAA.sampleLevel = 1;
renderPass = new THREE.RenderPass(scene, camera);
renderPass.setSize(w, h);
renderPass.enabled = false
composer.addPass(renderPass);
composer.addPass(SSAA);
composer.addPass(gammaCorrection);
// LIGHTS
hemi = new THREE.HemisphereLight(0xFFFFFF, 0xFFFFFF, .5);
scene.add(hemi);
light = new THREE.SpotLight(0xFFFFFF, .3);
light.position.set(10, 10, 10);
light.castShadows = true
scene.add(light);
ground = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), new THREE.MeshStandardMaterial({color:0xFFFFFF}));
ground.rotateX(-Math.PI / 2)
ground.receiveShadows = true;
scene.add(ground);
mesh = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshStandardMaterial({
color: 0x000000,
metalness: .13,
roughness: .38
}));
mesh.position.set(0, 1, 0);
mesh.castShadows = true;
mesh.receiveShadows = true;
scene.add(mesh);
// GLTF
loader = new THREE.GLTFLoader();
loader.setCrossOrigin( 'anonymous' );
let url =...