v 2.1.2

https://threejs-lightkit.com/

As a creative developer, you're probably familiar with how getting the lighting just right in Three.js can be time-consuming. Loading and trying HDR textures one by one, spending hours tinkering with your renderer and exposure settings, never feeling quite satisfied with the overall tone of your scene...

Well, say goodbye to that!

Designed to simplify and speed up the process, this tool lets you effortlessly integrate HDR lighting into your projects. Browse through the entire HDR Polyhaven API and enhance your scenes in minutes.

👉 Work faster
👉 Improve your scenes
👉 Find unexpected lighting ideas

What you get

• Browse 694 HDR textures
• Perfect control over your scene background (skybox, rotation, blur, intensity, ...)
• Free updates for new features to come
• Examples are provided to help you see TLK in action

How it works

Three Light Kit is a one-file JS plugin, just import it like any other package.

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

First use

const tlk = new TLK();

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

This code instanciates the Editor.

Once you're happy with your lighting settings, hit the "export" button. This will download a "tlk-preset" JSON file.

Loading a preset

const tlk = new TLK()

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

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

Full documentation: https://threejs-lightkit.com/

Does it work with React Three Fiber?

Yes. Three.js Light Kit is primarily developed in vanilla JS for vanilla JS projects, but it is compatible with React Three Fiber. One of the examples provided is a React app using RTF and Three.js Light Kit.