JSFiddle - React, Tailwind, and code Playground

by javiersanjuan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/misc/ProgressiveLightMap.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/controls/TransformControls.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/controls/TransformControls.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/jsm/libs/lil-gui.module.min.js';"></script>
    <script src="https://unpkg.com/[email protected]/index.js"></script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webgl_shadowmap_progressive_copy</title>
</head>
<body>

    <canvas class="webgl"></canvas>
    
</body>
</html>

CSS

*
{
    margin: 0;
    padding: 0;
}

html,
body
{
    overflow: hidden;
}

.webgl
{
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}

JavaScript

import { GUI } from 'https://unpkg.com/[email protected]/examples/jsm/libs/lil-gui.module.min.js';

// ShadowMap + LightMap Res and Number of Directional Lights
const shadowMapRes = 512, lightMapRes = 1024, lightCount = 8; // changed the lightCount 8->1
let camera, scene, renderer, controls, control, control2,
    object = new THREE.Mesh(), lightOrigin = null, progressiveSurfacemap;
const dirLights = [], lightmapObjects = [];
const params = { 'Enable': true, 'Blur Edges': true, 'Blend Window': 200,
                    'Light Radius': 50, 'Ambient Weight': 0.5, 'Debug Lightmap': false };
init();
createGUI();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.shadowMap.enabled = true;
    document.body.appendChild( renderer.domElement );

    // camera
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 0, 200, 400 );
    camera.name = 'Camera';

    // scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x949494 );
    scene.fog = new THREE.Fog( 0x949494, 1000, 3000 );

    // progressive lightmap
    progressiveSurfacemap = new THREE.ProgressiveLightMap ( renderer, lightMapRes );


    // directional lighting "origin"
    lightOrigin = new THREE.Group();
    lightOrigin.position.set( 170, 270, 220 ); // changed
    scene.add( lightOrigin );

    // transform gizmo
    control = new THREE.TransformControls( camera, renderer.domElement );
    control.addEventListener( 'dragging-changed', ( event ) => {

        controls.enabled = ! event.value;

    } );
    control.attach( lightOrigin );
    scene.add( control );

    // create 8 directional lights to speed up the convergence
    for ( let l = 0; l < lightCount; l ++ ) {

        const dirLight = new THREE.DirectionalLight( 0xffffff, 1.0...