JSFiddle - React, Tailwind, and code Playground

by Matt

HTML

<base href="https://rawcdn.githack.com/mrdoob/three.js/r156/examples/" />
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
	{
		"imports": {
			"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
			"lil-gui": "https://cdn.jsdelivr.net/npm/[email protected]/dist/lil-gui.esm.min.js"
		}
	}
</script>

CSS

canvas {
	position: fixed;
	inset: 0;
}

JavaScript

import * as THREE from 'three';
import { GUI } from 'lil-gui'

import Stats from 'three/addons/libs/stats.module.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { ShadowMapViewer } from 'three/addons/utils/ShadowMapViewer.js';

let camera, scene, renderer, clock, stats;
let dirLight, spotLight;
let torusKnot, cube;
let dirLightShadowMapViewer, spotLightShadowMapViewer;

init();
animate();


function init() {

	initScene();
	initShadowMapViewers();
	initMisc();

	document.body.appendChild( renderer.domElement );
	window.addEventListener( 'resize', onWindowResize );

}

function initScene() {

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set( 0, 15, 35 );

	scene = new THREE.Scene();

	// Lights

	scene.add( new THREE.AmbientLight( 0x404040, 3 ) );

	spotLight = new THREE.SpotLight( 0xffffff, 500 );
	spotLight.name = 'Spot Light';
	spotLight.angle = Math.PI / 5;
	spotLight.penumbra = 0.3;
	spotLight.position.set( 10, 10, 5 );
	spotLight.castShadow = true;
	spotLight.shadow.camera.near = 8;
	spotLight.shadow.camera.far = 30;
	spotLight.shadow.mapSize.width = 1024;
	spotLight.shadow.mapSize.height = 1024;
	scene.add( spotLight );

	scene.add( new THREE.CameraHelper( spotLight.shadow.camera ) );

	dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
	dirLight.name = 'Dir. Light';
	dirLight.position.set( 0, 10, 0 );
	dirLight.castShadow = true;
	dirLight.shadow.camera.near = 1;
	dirLight.shadow.camera.far = 10;
	dirLight.shadow.camera.right = 15;
	dirLight.shadow.camera.left = - 15;
	dirLight.shadow.camera.top	= 15;
	dirLight.shadow.camera.bottom = - 15;
	dirLight.shadow.mapSize.width = 1024;
	dirLight.shadow.mapSize.height = 1024;
	scene.add( dirLight );

	scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );

	// Geometry
	let geometry = new THREE.TorusKnotGeometry( 25, 8, 75, 20 );
	let material = new THREE.MeshPhongMaterial( {
		color:...