THREE MANGA
Set up light
In this section, I will introduce you how to set up lights.
So, I expect you to already be able to set up the basic manga-style scene.
If not, you can check out the Set up scene section.
You can create a light with MangaDirectionalLight class like this.
const mangaDirectionalLight = new MangaDirectionalLight(-2, 2, 2, -2, 1, 5)And, This is a basic MangaShaderManager initiation.
const mangaShaderManager = new ThreeManga.MangaShaderManager({
renderer: renderer,
scene: scene,
camera: camera,
lightList: [],
resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
})You will notice there’s a field named “lightList”. You can add light to “lightList” like this.
const mangaDirectionalLight = new MangaDirectionalLight(-2, 2, 2, -2, 1, 5)
mangaDirectionalLight.position.z = 2
mangaDirectionalLight.position.x = 2
mangaDirectionalLight.position.y = 2
const mangaShaderManager = new ThreeManga.MangaShaderManager({
renderer: renderer,
scene: scene,
camera: camera,
lightList: [mangaDirectionalLight],
resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
})
// ...
mangaDirectionalLight.lookAt(mesh.position)
In the case you want to debug the light source position, you can use CameraHelper in ThreeJS because MangaDirectionalLight extends from OrthographicCamera of ThreeJS like this.
// ...
const lightHelper = new THREE.CameraHelper(mangaDirectionalLight)
scene.add(lightHelper)
// ...You can modify rendering behavior by tweak material properties. Learn more about it in the MangaMaterial section.