Usage in JavaScript

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.

Usage with React Three Fiber

Import

The three-light-kit.react.mjs file must be placed in the same directory as three-light-kit.mjs.

import ThreeLightKit from "./tlk/three-light-kit.react.mjs";

Example

import { Canvas } from '@react-three/fiber';
import ThreeLightKit from 'three-light-kit.react.mjs';

function Scene() {
return (
    <Canvas>
        ...
        <ThreeLightKit editor />
    </Canvas>
);
}

Props

editor

Enables the light editor interface.

<ThreeLightKit editor />

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.

<ThreeLightKit editor={{ position: 'top left' }} />

load

Loads a predefined lighting configuration from a JSON file.

<ThreeLightKit editor load={'tlk-preset.json'} />

targetRef

Specifies a single mesh in the scene to target with the light editor.
Parameter should be of type `React.RefObject`.

<ThreeLightKit editor targetRef={meshRef} />