JSFiddle - React, Tailwind, and code Playground

by ilanbentley

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js WebGL  - postprocessing - FXAA</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            margin: 0;
            background-color: #fff;
            color: #222;
        }

        #container {
            position: absolute;
            top: 0px;
            width: 100%;
            bottom: 0px;
        }
    </style>
</head>

<body>


<div id="container"></div>

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

<script type="importmap">
			{
				"imports": {
					"three": "https://threejs.org/build/three.module.js"
				}
			}
		</script>

<script type="module">

    import * as THREE from 'three';

    import { EffectComposer } from 'https://threejs.org/examples/jsm/postprocessing/EffectComposer.js';
    import { RenderPass } from 'https://threejs.org/examples/jsm/postprocessing/RenderPass.js';
    import { ShaderPass } from 'https://threejs.org/examples/jsm/postprocessing/ShaderPass.js';
    import { FXAAShader } from 'https://threejs.org/examples/jsm/shaders/FXAAShader.js';

    let camera, scene, renderer, clock, group, container;

    let composer, fxaaPass;

    init();
    animate();

    function init() {

        container = document.getElementById( 'container' );

        camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 2000 );
        camera.position.z = 500;

        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xffffff );
        scene.fog = new THREE.Fog( 0xcccccc, 100, 1500 );

        clock = new THREE.Clock();

        const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
        hemiLight.position.set( 0, 1000, 0 );
        scene.add( hemiLight );

        const dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
       ...