Skip to content

Commit 7aa95d9

Browse files
bambooombambooom
committed
✨ Add notes 5 for threejs jouenry.
1 parent 6ac8281 commit 7aa95d9

1 file changed

Lines changed: 152 additions & 0 deletions

File tree

‎content/posts/threejs-journey-notes-5-advanced-techniques-part3.md‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
---
2+
draft: false
3+
title: Three.js Journey Notes 5 - Advanced Techniques Part3
4+
date: 2025-03-17
5+
categories: Learning
6+
comments: true
7+
ShowToc: true
8+
isCJKLanguage: false
9+
---
10+
11+
课程链接：[three.js journey](https://threejs-journey.com/)
12+
13+
[Notes 1 - Basics](../threejs-journey-notes-1-basics)
14+
[Notes 2 - Classic Techniques](../threejs-journey-notes-2-classic-techniques)
15+
[Notes 3 - Advanced Techniques Part1](../threejs-journey-notes-3-advanced-techniques-part1)
16+
[Notes 4 - Advanced Techniques Part2](../threejs-journey-notes-4-advanced-techniques-part2)
17+
18+
19+
## Realistic Render
20+
21+
### Tone Mapping
22+
23+
intends to convert High Dynamic Range (HDR) values to Low Dynamic Range (LDR) values.
24+
Tone mapping in Three.js will actually fake the process of converting LDR to HDR even if the colors aren't HDR resulting in a very realistic render.
25+
26+
```javascript
27+
// Tone mapping
28+
renderer.toneMapping = THREE.ACESFilmicToneMapping
29+
// adjust exposure, influencing the amount of light allowed into the scene
30+
// higher make the scene more bright
31+
renderer.toneMappingExposure = 2
32+
```
33+
34+
There are multiple possible values:
35+
36+
- `THREE.NoToneMapping` (default)
37+
- `THREE.LinearToneMapping`
38+
- `THREE.ReinhardToneMapping` (washed-out colors, high level of realism)
39+
- `THREE.CineonToneMapping`
40+
- `THREE.ACESFilmicToneMapping`
41+
42+
### Antialiasing
43+
44+
>We call aliasing an artifact that might appear in some situations where we can see a stair-like effect, usually on the edge of the geometries. (锯齿边缘)
45+
46+
- Easy solution will be increase the renderer's resolution. It's called **super sampling (SSAA)** or fullscreen **sampling (FSAA)**. But it can result in performance issues.
47+
- Other solution: **multi sampling (MSAA)**, render multiple values per pixel (usually 4) only for geometries edges.
48+
49+
```javascript
50+
const renderer = new THREE.WebGLRenderer({
51+
canvas: canvas,
52+
antialias: true // do this will enable the MSAA
53+
})
54+
```
55+
56+
### Shadows
57+
58+
Environment map is like a light coming from every direct, it can't cast shadows.
59+
We need to add another light which can roughly matched the lighting of environment map and cast the shadows.
60+
61+
```javascript
62+
// Shadows
63+
renderer.shadowMap.enabled = true
64+
renderer.shadowMap.type = THREE.PCFSoftShadowMap
65+
66+
// for example add directional light to cast shadow
67+
/**
68+
* Directional light
69+
*/
70+
const directionalLight = new THREE.DirectionalLight('#ffffff', 6)
71+
directionalLight.position.set(3, 7, 6)
72+
scene.add(directionalLight)
73+
// enable shadows of directional light
74+
directionalLight.castShadow = true
75+
76+
// Target
77+
directionalLight.target.position.set(0, 4, 0)
78+
directionalLight.target.updateWorldMatrix()
79+
directionalLight.shadow.camera.far = 15
80+
81+
// increase shadow map size to be more realistic and precise shadows
82+
// directionalLight.shadow.mapSize.set(1024, 1024) // shadow will be sharp, can be lower to 5112x512
83+
directionalLight.shadow.mapSize.set(512, 512) // will get more blurry shadow, look better and improve the performance
84+
85+
// activase shadows on all the meshes of the imported modal
86+
const updateAllMaterials = () =>
87+
{
88+
scene.traverse((child) =>
89+
{
90+
if(child.isMesh)
91+
{
92+
// ...
93+
94+
child.castShadow = true
95+
child.receiveShadow = true
96+
}
97+
})
98+
}
99+
```
100+
101+
"Shadow acne"（阴影失真，阴影暗斑） can occur on both smooth and flat surfaces for precision reasons when calculating if the surface is in the shadow or not. Usually caused by not enough resolution. We need to use shadow bias to fix it.
102+
103+
```javascript
104+
// `normalBias` usually helps for rounded surfaces.
105+
directionalLight.shadow.normalBias = 0.027
106+
// `bias` usually helps for flat surfaces.
107+
directionalLight.shadow.bias = - 0.004
108+
```
109+
110+
111+
### Texture, Color space
112+
113+
> The color space is a way to optimise how colors are being stored according to the human eye sensitivity. This mostly concerns textures that are supposed to be seen.
114+
115+
By default, Three.js sets the color space to linear, meaning that we need to change textures which are supposed to be seen by human eye to be `THREE.SRGBColorSpace`.
116+
117+
```javascript
118+
floorColorTexture.colorSpace = THREE.SRGBColorSpace
119+
120+
wallColorTexture.colorSpace = THREE.SRGBColorSpace
121+
```
122+
123+
## Code Structuring for bigger projects
124+
125+
这位老师甚至连 JS 的 class & modules 也顺带讲了一些基础知识 😂🫶
126+
127+
![](https://threejs-journey.com/assets/lessons/42/014.png)
128+
129+
Anyway, skip parts I already know about, the folder structure of the above demo can be organized like:
130+
131+
```bash
132+
.
133+
├── experience
134+
│ ├── Camera.ts # Camera with orbit control
135+
│ ├── Renderer.ts # WebGLRenderer
136+
│ ├── index.ts # Experience class: control all
137+
│ ├── sources.ts # set images/.. urls
138+
│ ├── utils
139+
│ │ ├── Debug.ts # 'lil-gui'
140+
│ │ ├── EventEmitter.ts # event bus, handle events
141+
│ │ ├── Resources.ts # Resources class: load and handle assets
142+
│ │ ├── Sizes.ts # handle resize
143+
│ │ └── Time.ts # handle tick()
144+
│ └── world
145+
│ ├── Environment.ts # handle scene and environmentMap
146+
│ ├── Floor.ts # Floor class, to draw specific floor
147+
│ ├── Fox.ts # import and update Model
148+
│ └── World.ts # container for this scene
149+
└── index.tsx # my page init
150+
```
151+
152+
[demo example project](https://github.com/bambooom/threejs-journey/tree/main/src/course/chapter3-advanced-techniques/26-code-structuring-for-bigger-projects)

0 commit comments

Comments
 (0)