JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<button
style="
font-family: Courier;
font-size: 12pt;
text-align: center;
position: absolute;
min-width: 80px;
border-radius: 0;
z-index: 1;
left: 90px;
"
id="tog"
class="toggle"
>
Toogle SSAO
</button>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/[email protected]/build/three.module.js";
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js";
import { RoomEnvironment } from "https://cdn.skypack.dev/[email protected]/examples/jsm/environments/RoomEnvironment.js";
import { DebugEnvironment } from "https://cdn.skypack.dev/[email protected]/examples/jsm/environments/DebugEnvironment.js";
import { RGBELoader } from "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/RGBELoader.js";
import Stats from "https://cdn.skypack.dev/[email protected]/examples/jsm/libs/stats.module.js";
import { EffectComposer } from "https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/RenderPass.js";
import { SSAARenderPass } from "https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/SSAARenderPass.js";
import { SAOPass } from "https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/SAOPass.js";
import { UnrealBloomPass } from "https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/UnrealBloomPass.js";
import { Sky } from "https://cdn.skypack.dev/[email protected]/examples/jsm/objects/Sky.js";
...