THREE MANGA
Set up scene
Warning: This module required device to support WebGL2.0
To set up a basic scene with a manga-like shader, you can start with setting up a basic ThreeJS scene.
import * as THREE from 'three'
import * as ThreeManga from 'three-manga'
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.getElementById('root').appendChild(renderer.domElement)
const scene = new THREE.Scene()
scene.background = new THREE.Color('gray')
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
camera.position.z = 3
const mesh = new THREE.Mesh(
new THREE.TorusKnotGeometry(0.6, 0.2, 400, 100),
new THREE.MeshBasicMaterial({ color: 'black' })
)
scene.add(mesh)
function render() {
renderer.render(scene, camera)
window.requestAnimationFrame(render)
}
render()
The code above is a basic one that just displays a torus on the screen. To make torus displayed in a manga-like style, you must change the material to MangaMaterial. But, to get the material, you can get it from MangaShaderManager.
import * as THREE from 'three'
import * as ThreeManga from 'three-manga'
//...
const mangaShaderManager = new ThreeManga.MangaShaderManager({
renderer: renderer,
scene: scene,
camera: camera,
lightList: [],
resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
})
const material = mangaShaderManager.getMangaMaterial()
const mesh = new THREE.Mesh(
new THREE.TorusKnotGeometry(0.6, 0.2, 400, 100),
material // change material
)
//...However, the MangaMaterial needs to update the data of the scene every frame. So, you have to call the update method of MangaShaderManager every frame.
//...
function render() {
mangaShaderManager.update() // add this
renderer.render(scene, camera)
window.requestAnimationFrame(render)
}
render()That’s all the basic steps for creating a basic manga-like 3D scene. If you do it correctly, you will see the result below.
You can notice that the model still has no shadow. I will cover this topic later in Set up light section.