${config.title}
` : ''} 23 | ${ 24 | config.description 25 | ? `
26 |
`
28 | : ``
29 | }
30 | ${config.description}
27 |
31 | ${
32 | config.twitter
33 | ? `
34 | 
35 | `
36 | : ``
37 | }
38 | ${
39 | config.github
40 | ? `
41 | 
42 | `
43 | : ``
44 | }
45 |
46 | `
47 | )
48 | document.body.prepend(container)
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/engine/interface/Loader.ts:
--------------------------------------------------------------------------------
1 | import './loader.scss'
2 |
3 | export class Loader {
4 | element: HTMLDivElement
5 |
6 | constructor() {
7 | this.element = document.createElement('div')
8 | this.element.classList.add('loader')
9 | this.element.insertAdjacentHTML(
10 | 'beforeend',
11 | `
12 |
35 | `
36 | : ``
37 | }
38 | ${
39 | config.github
40 | ? `
41 |
42 | `
43 | : ``
44 | }
45 |
13 |
16 | `
17 | )
18 |
19 | this.start()
20 | }
21 |
22 | start() {
23 | document.body.prepend(this.element)
24 | }
25 |
26 | setProgress(progress: number) {
27 | const progressNumber = this.element.querySelector(
28 | '.progress-number'
29 | ) as HTMLHeadingElement
30 |
31 | progressNumber!.innerText = `${Math.floor(progress * 100)}%`
32 |
33 | const progressBar = this.element.querySelector(
34 | '.progress-bar'
35 | ) as HTMLDivElement
36 |
37 | progressBar.style.width = `${progress * 100}%`
38 | }
39 |
40 | complete() {
41 | this.element.remove()
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/engine/interface/info.scss:
--------------------------------------------------------------------------------
1 | .info-container {
2 | position: absolute;
3 | bottom: 0;
4 | left: 0;
5 | padding: 16px 20px;
6 |
7 | display: flex;
8 | flex-direction: column;
9 |
10 | user-select: none;
11 | opacity: 40%;
12 | transition: opacity 0.3s ease-in-out;
13 |
14 | color: #fff;
15 | font-family: 'Helvetica', 'Arial', sans-serif;
16 | text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
17 |
18 | &:hover {
19 | opacity: 100%;
20 | }
21 |
22 | h1 {
23 | margin-bottom: 0;
24 | font-weight: normal;
25 | }
26 |
27 | .description {
28 | width: 250px;
29 | max-width: 100%;
30 | margin-bottom: 4px;
31 | }
32 |
33 | .social-container {
34 | display: flex;
35 | flex-direction: row;
36 | justify-content: flex-start;
37 | align-items: center;
38 | }
39 |
40 | .social-button {
41 | display: flex;
42 | width: 24px;
43 | height: 24px;
44 | padding: 8px;
45 | margin-right: 8px;
46 | border-radius: 50px;
47 | align-items: center;
48 |
49 | background: #fff;
50 | transition: box-shadow 0.3s ease-in-out;
51 |
52 | &:hover {
53 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
54 | }
55 |
56 | img {
57 | max-width: 100%;
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/engine/interface/loader.scss:
--------------------------------------------------------------------------------
1 | .loader {
2 | width: 100%;
3 | height: 100%;
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 |
8 | color: #fff;
9 | font-family: 'Helvetica', 'Arial', sans-serif;
10 | font-weight: normal;
11 |
12 | .loader-inner {
13 | width: 500px;
14 | max-width: 95%;
15 | }
16 |
17 | .progress-number {
18 | text-align: center;
19 | }
20 |
21 | .progress-bar {
22 | background-color: #fff;
23 | transition: width 0.3s ease-in-out;
24 |
25 | height: 5px;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/engine/utilities/EventEmitter.ts:
--------------------------------------------------------------------------------
1 | export class EventEmitter {
2 | private listeners: { [key: string]: Function[] } = {}
3 |
4 | public on(event: string, listener: Function) {
5 | if (!this.listeners[event]) {
6 | this.listeners[event] = []
7 | }
8 |
9 | this.listeners[event].push(listener)
10 |
11 | return () => this.off(event, listener)
12 | }
13 |
14 | public off(event: string, listener: Function) {
15 | if (!this.listeners[event]) {
16 | return
17 | }
18 |
19 | const index = this.listeners[event].indexOf(listener)
20 |
21 | if (index === -1) {
22 | return
23 | }
24 |
25 | this.listeners[event].splice(index, 1)
26 | }
27 |
28 | public emit(event: string, ...args: any[]) {
29 | if (!this.listeners[event]) {
30 | return
31 | }
32 |
33 | this.listeners[event].forEach((listener) => listener(...args))
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import './style.scss'
2 | import { Engine } from './engine/Engine'
3 | import { MainScene } from './toon-shader/MainScene'
4 |
5 | new Engine({
6 | canvas: document.querySelector('#canvas') as HTMLCanvasElement,
7 | experience: MainScene,
8 | info: {
9 | title: 'Three.js Toon Shader',
10 | documentTitle: 'Three.js Toon Shader',
11 | description: 'GLSL Toon Shader with Three.js',
12 | twitter: 'https://twitter.com/maya_ndljk',
13 | github: 'https://github.com/mayacoda/toon-shader'
14 | }
15 | })
16 |
--------------------------------------------------------------------------------
/src/style.scss:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | #canvas {
4 | height: 100%;
5 | width: 100%;
6 | margin: 0;
7 | padding: 0;
8 | overflow: hidden;
9 | background: #000;
10 | }
11 |
12 | #canvas {
13 | outline: none;
14 | }
15 |
--------------------------------------------------------------------------------
/src/toon-shader/Floor.ts:
--------------------------------------------------------------------------------
1 | import * as THREE from 'three'
2 |
3 | export class Floor extends THREE.Mesh {
4 | constructor() {
5 | super()
6 | this.geometry = new THREE.PlaneBufferGeometry(10, 10, 2)
7 | this.material = new THREE.MeshStandardMaterial({ color: '#7a7775' })
8 | this.receiveShadow = true
9 |
10 | this.rotation.x = -Math.PI / 2
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/toon-shader/MainScene.ts:
--------------------------------------------------------------------------------
1 | import { Experience } from '../engine/Experience'
2 | import { Engine } from '../engine/Engine'
3 | import { Floor } from './Floor'
4 | import { Sphere } from './geometries/Sphere'
5 | import * as THREE from 'three'
6 | import { Knot } from './geometries/Knot'
7 | import { Cylinder } from './geometries/Cylinder'
8 | import { Tentacle } from './geometries/Tentacle'
9 |
10 | export class MainScene implements Experience {
11 | constructor(private engine: Engine) {}
12 |
13 | resources = [Tentacle.resource]
14 |
15 | init() {
16 | const floor = new Floor()
17 | this.engine.scene.add(floor)
18 |
19 | const sphere = new Sphere()
20 | this.engine.scene.add(sphere)
21 |
22 | const knot = new Knot()
23 | knot.position.x = -1.25
24 | this.engine.scene.add(knot)
25 |
26 | const cylinder = new Cylinder()
27 | cylinder.position.x = 1.25
28 | this.engine.scene.add(cylinder)
29 |
30 | const tentacle = new Tentacle(this.engine)
31 | tentacle.position.z = -2.5
32 | this.engine.scene.add(tentacle)
33 |
34 | const ambientLight = new THREE.AmbientLight('#ffffff', 1)
35 | this.engine.scene.add(ambientLight)
36 |
37 | const directionalLight = new THREE.DirectionalLight('#f8f1e6', 0.5)
38 | directionalLight.position.set(1, 1, 1)
39 | directionalLight.castShadow = true
40 | directionalLight.shadow.mapSize.width = 4096
41 | directionalLight.shadow.mapSize.height = 4096
42 | this.engine.scene.add(directionalLight)
43 | }
44 |
45 | update() {}
46 |
47 | resize() {}
48 | }
49 |
--------------------------------------------------------------------------------
/src/toon-shader/ToonShaderMaterial.ts:
--------------------------------------------------------------------------------
1 | import * as THREE from 'three'
2 | import toonVertexShader from './shaders/toon.vert'
3 | import toonFragmentShader from './shaders/toon.frag'
4 |
5 | export class ToonShaderMaterial extends THREE.ShaderMaterial {
6 | constructor({ color = '#fff' }: { color: string }) {
7 | super({
8 | lights: true,
9 | uniforms: {
10 | ...THREE.UniformsLib.lights,
11 | uGlossiness: {
12 | value: 20,
13 | },
14 | uColor: {
15 | value: new THREE.Color(color),
16 | },
17 | },
18 | })
19 |
20 | this.vertexShader = toonVertexShader
21 | this.fragmentShader = toonFragmentShader
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/toon-shader/geometries/Cylinder.ts:
--------------------------------------------------------------------------------
1 | import * as THREE from 'three'
2 | import { ToonShaderMaterial } from '../ToonShaderMaterial'
3 |
4 | export class Cylinder extends THREE.Mesh {
5 | material: ToonShaderMaterial
6 |
7 | constructor() {
8 | super()
9 |
10 | this.geometry = new THREE.CylinderBufferGeometry(0, 0.5, 1, 32, 8)
11 | this.material = new ToonShaderMaterial({ color: '#6b8847' })
12 |
13 | this.castShadow = true
14 |
15 | this.position.y = 0.5
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/toon-shader/geometries/Knot.ts:
--------------------------------------------------------------------------------
1 | import * as THREE from 'three'
2 | import { ToonShaderMaterial } from '../ToonShaderMaterial'
3 |
4 | export class Knot extends THREE.Mesh {
5 | material: ToonShaderMaterial
6 |
7 | constructor() {
8 | super()
9 |
10 | this.geometry = new THREE.TorusKnotBufferGeometry(1, 0.4, 128, 64)
11 | this.material = new ToonShaderMaterial({ color: '#a15218' })
12 |
13 | this.scale.setScalar(0.3)
14 |
15 | this.castShadow = true
16 |
17 | this.position.y = 0.5
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/toon-shader/geometries/Sphere.ts:
--------------------------------------------------------------------------------
1 | import * as THREE from 'three'
2 | import { ToonShaderMaterial } from '../ToonShaderMaterial'
3 |
4 | export class Sphere extends THREE.Mesh {
5 | material: ToonShaderMaterial
6 |
7 | constructor() {
8 | super()
9 |
10 | this.geometry = new THREE.SphereBufferGeometry(0.5, 64, 64)
11 | this.material = new ToonShaderMaterial({ color: '#33d9c5' })
12 |
13 | this.castShadow = true
14 |
15 | this.position.y = 0.5
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/toon-shader/geometries/Tentacle.ts:
--------------------------------------------------------------------------------
1 | import * as THREE from 'three'
2 | import { Engine } from '../../engine/Engine'
3 | import { Resource } from '../../engine/Resources'
4 | import { ToonShaderMaterial } from '../ToonShaderMaterial'
5 |
6 | export class Tentacle extends THREE.Group {
7 | public static resource: Resource = {
8 | name: 'tentacle',
9 | path: 'models/tentacle.glb',
10 | type: 'gltf',
11 | }
12 |
13 | constructor(engine: Engine) {
14 | super()
15 |
16 | const gltfScene = engine.resources.getItem(Tentacle.resource.name)
17 | this.add(...gltfScene.scene.children)
18 |
19 | this.traverse((child: THREE.Object3D) => {
20 | if (child instanceof THREE.Mesh) {
21 | child.castShadow = true
22 | child.receiveShadow = true
23 | }
24 | })
25 |
26 | const outside = this.getObjectByName('Tentacle_1') as THREE.Mesh
27 | const inside = this.getObjectByName('Tentacle_2') as THREE.Mesh
28 | const sucker = this.getObjectByName('Tentacle_3') as THREE.Mesh
29 |
30 | outside.material = new ToonShaderMaterial({ color: '#231312' })
31 | inside.material = new ToonShaderMaterial({ color: '#e57a7a' })
32 | sucker.material = new ToonShaderMaterial({ color: '#b25c73' })
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/toon-shader/shaders/toon.frag:
--------------------------------------------------------------------------------
1 | #include