Perfect lighting,
in seconds.

Three.js Light Kit is a one-file JavaScript package designed to simplify and accelerate the process of HDR lighting. It's like a fast-forward button for your lighting setup, transforming hours into minutes and bringing your scenes to life with stunning, hassle-free lighting!

Get it on Gumroad

Save time

Tired of manually loading and trying HDR textures one by one? Burned out from constantly updating your code, or creating GUIs for every parameter?
Three.js Light Kit is a tool designed specifically to simplify and accelerate this process, turning hours of work into minutes.

Elevate your scenes

With Three.js Light Kit, you not only have the assurance of browsing top-tier quality HDR textures, but you can also adjust your rendering settings (intensity, tonemapping, tonemappingExposure, background blur, etc.) with just a few clicks, all while immediately visualizing their impact on your scene. Perfect control for perfect lighting!

Get inspired

Lighting often defines the mood of a scene. By exploring various HDR lighting options, you'll most likely discover ideas you might not have considered otherwise. This makes Three.js Light Kit the perfect companion for creative professionals.

Basic usage

Using TLK is a 2-step process:
1. First use the editor to select and tune your lighting setup before exporting it.
2. Then, import this setup, and turn the editor off if you don't need it anymore.

First use

Let's instanciate the editor.

import TLK from 'path/to/three-light-kit.mjs';

const tlk = new TLK();

tlk.apply( scene, { renderer, editor: true })

Note that we provided the renderer in the apply() method. This is not mandatory, but highly recommended as it will allow the editor to access its toneMapping and toneMappingIntensity attributes!

Once you're happy with your lighting setup, export it using the "Export" button. This will download a JSON file named tlk-preset.json.

Loading a preset

Move the tlk-preset.json file to the folder containing your project.
Then upload it using the following code:

const tlk = new TLK()

tlk.on( 'load', () => { 
    tlk.apply( scene, { renderer, editor: true })
})

tlk.load( 'tlk-preset.json' )

Options

editor.position

Defines the position of the editor within the window.
Possible values include top, bottom, left and right, in any order.
Default is top right

const tlk = new TLK()
tlk.apply( scene, { 
    editor: { 
        position: 'top left' 
    }
})

editor.closed

Determines whether the editor is expanded or collapsed upon initialization.
Default is false.

const tlk = new TLK()
tlk.apply( scene, { 
    editor: { 
        closed: true
    }
})

editor.onMount

A callback function triggered once, when the editor is rendered in the DOM.

const tlk = new TLK()
tlk.apply( scene, { 
    editor: { 
        onMount: () => {
            console.log('TLK Editor is ready')
        }
    }
})

editor.onUpdate

A callback function triggered every time the editor is updated.

const tlk = new TLK()
tlk.apply( scene, { 
    editor: { 
        onUpdate: () => {
            console.log('TLK Editor has been updated')
        } 
    }
})

target

Applies the environment lighting to a single material.

const tlk = new TLK();
tlk.apply( scene, { 
    renderer, 
    target: mesh.material, 
    editor: true 
});

Checkout the "target" example to see this property in action.

ToneMapping control with Postprocessing

By default, Three.js tonemapping is managed through the renderer.tonemapping property.
However, when using postprocessing by pmndrs, tone mapping is managed through an effect.
In this case, you'll need to provide the toneMappingEffect and toneMappingModes to Three.js Light Kit.

import { EffectComposer, ToneMappingEffect, ToneMappingMode, EffectPass, RenderPass } from 'postprocessing';

const toneMappingEffect = new ToneMappingEffect({ mode: ToneMappingMode.ACES_FILMIC });

const tlk = new TLK();
tlk.apply(scene, { 
    renderer, 
    editor: true,
    toneMappingEffect,
    toneMappingModes: ToneMappingMode
});

Checkout the "postprocessing" example to see these options in action.

Perfect lighting,in seconds.