Skip to content

Commit c400520

Browse files
bambooombambooom
committed
📝 Update threejs notes1
1 parent 3938f39 commit c400520

File tree

1 file changed

+165
-26
lines changed

1 file changed

+165
-26
lines changed

‎content/posts/threejs-journey-notes-1-basics.md‎

Lines changed: 165 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
draft: false
3-
title: Three.js Journey Notes - Basics
3+
title: Three.js Journey Notes 1 - Basics
44
date: 2025-02-26
55
categories: Learning
66
comments: true
@@ -75,7 +75,7 @@ renderer.render(scene, camera); // 这一步才会在网页上看到渲染的效
7575

7676
## Animations
7777

78-
前面的例子里 render 只是一个静态的结果，想要让 3D 能动起来，需要使用 `window.requestAnimationFrame` 持续进行 render
78+
前面的例子里 render 只是一个静态的结果，想要让 3D 能动起来或者可以交互，需要使用 `window.requestAnimationFrame` 持续进行 render
7979

8080
fps = frames per seconds
8181

@@ -158,6 +158,11 @@ const positionsAttribute = new THREE.BufferAttribute(positionsArray, 3)
158158

159159
## Textures
160160

161+
> Textures, as you probably know, are images that will cover the surface of your geometries. Many types of textures can have different effects on the appearance of your geometry. It's not just about the color.
162+
163+
[door texture example](https://3dtextures.me/2019/04/16/door-wood-001/)
164+
165+
### Texture types
161166
mostly used types:
162167
- color
163168
- alpha
@@ -171,21 +176,23 @@ mostly used types:
171176
- add small details
172177
- doesn't need subdivision
173178
- the vertices won't move
174-
- lure(诱骗诱使) the light about the face orientation
179+
- lure(诱骗诱使) the *light* about the face orientation
175180
- better performances than adding a height texture with a lot if subdivision
176181
- ambient occlusion
177-
- grayscale
178-
- add fake shadows in crevices
179-
- metalness
182+
- grayscale image
183+
- add fake shadows in the surface's crevices(裂缝)
184+
- 不一定准确，但是能造出 contrast
185+
- metalness 金属质感
180186
- grayscale
181187
- white is metallic, black is not
182188
- mostly for reflection
183-
- roughness
189+
- roughness 粗糙度
184190
- grayscale
185191
- in duo with the metalness
186192
- white is rough
187193
- black is smooth
188-
- mostly for light dissipation
194+
- mostly for light dissipation(消散)
195+
- 举例来说，比如地毯非常粗糙，所以基本看不到光线反射，但水面就很光滑，肯定需要有光线反射效果
189196

190197
**PBR principle** (especially the metalness and the roughness):
191198
- physical based rendering
@@ -195,35 +202,167 @@ mostly used types:
195202
- [Physically-Based Rendering, And You Can Too! | Marmoset](https://marmoset.co/posts/physically-based-rendering-and-you-can-too/)
196203

197204

198-
filtering and mipmapping: a technique that consists of creating half a smaller version of a texture again and again until you get a 1x1 texture. All those texture variations are sent to the GPU, and the GPU will choose the most appropriate version of the texture.
205+
### Load Texture
206+
207+
主要就是使用 [TextureLoader](https://threejs.org/docs/#api/en/loaders/TextureLoader)，然后设置在 material 上即可看到效果。
208+
209+
```js
210+
const textureLoader = new THREE.TextureLoader()
211+
const texture = textureLoader.load('/textures/door/color.jpg')
212+
texture.colorSpace = THREE.SRGBColorSpace
213+
214+
const material = new THREE.MeshBasicMaterial( { map:texture } );
215+
```
216+
217+
218+
### UV unwrapping
219+
> texture is being stretched or squeezed in different ways to cover the geometry.
220+
221+
> That is called UV unwrapping. You can imagine that like unwrapping an origami or a candy wrap to make it flat. Each vertex will have a 2D coordinate on a flat (usually square) plane.
222+
223+
也就是不同形状的物体在使用 texture 的时候都是先将其 uv unwrapping 成一张平面，再去按照一定的规则进行平铺等。
224+
unwrapping 出来的平面就会有各个点的 uv 2D coordinates（`geometry.attributes.uv`）。
225+
226+
如果是自己创作新的 geometry，就会需要自行设置 uv coordinates。
227+
228+
229+
```js
230+
// repeat: 2D vector
231+
colorTexture.repeat.x = 2
232+
colorTexture.repeat.y = 3
233+
// texture not being set up to repeat itself by default. To change that, you have to update the wrapS and wrapT properties using the THREE.RepeatWrapping constant.
234+
colorTexture.wrapS = THREE.RepeatWrapping // for x-axis
235+
colorTexture.wrapT = THREE.RepeatWrapping // for y-axis
236+
```
237+
238+
### Filtering and Mipmapping
239+
240+
> Mipmapping is a technique that consists of creating half a smaller version of a texture again and again until you get a 1x1 texture. All those texture variations are sent to the GPU, and the GPU will choose the most appropriate version of the texture.
241+
199242
主要是为了处理毛边，blurring
200243

244+
> Minification filter happens when the pixels of texture are smaller than the pixels of the render.
245+
246+
当 texture 太大，可以设置 `minFilter` 使用以下某一个值：
247+
- `THREE.NearestFilter`
248+
- `THREE.LinearFilter`
249+
- `THREE.NearestMipmapNearestFilter`
250+
- `THREE.NearestMipmapLinearFilter`
251+
- `THREE.LinearMipmapNearestFilter`
252+
- `THREE.LinearMipmapLinearFilter` (default)
253+
254+
```js
255+
colorTexture.minFilter = THREE.NearestFilter
256+
```
257+
258+
当 texture 太小，可以设置 `magFilter` 使用以下某一个值（magFilter 只有两个可能值）：
259+
- `THREE.NearestFilter`
260+
- `THREE.LinearFilter` (default)
261+
262+
```js
263+
colorTexture.magFilter = THREE.NearestFilter
264+
```
265+
201266

202-
`.jpg` lossy compression but usually lighter
203-
`.png` lossless compression but usually heavier
267+
### format and optimisation
204268

205-
make texture image as small as possible, GPU need to store it, but it has limitation.
206-
texture resolution better must be a power of 2, 512x512, 1024x1024, 512x2048
269+
- `.jpg` lossy compression but usually lighter
270+
- `.png` lossless compression but usually heavier
271+
- make texture image as small as possible, GPU need to store it, but it has limitation.
272+
- texture resolution better must be a power of 2, 512x512, 1024x1024, 512x2048
273+
- where to find textures:
274+
- [poliigon.com](http://poliigon.com/)
275+
- [3dtextures.me](http://3dtextures.me/)
276+
- [arroway-textures.ch](http://arroway-textures.ch/)
207277

208-
where to find textures:
209-
- [poliigon.com](http://poliigon.com/)
210-
- [3dtextures.me](http://3dtextures.me/)
211-
- [arroway-textures.ch](http://arroway-textures.ch/)
212278

213279
## Material
214280

215-
are used to put a color on each visible pixel of the geometries
216-
The algorithms that decide on the color of each pixel are written in programs called **shaders**. Writing shaders is one of the most challenging parts of WebGL and Three.js, but don't worry; Three.js has many built-in materials with pre-made shaders.
281+
> Material are used to put a color on each visible pixel of the geometries.
217282
218-
Normals material:
219-
"Normals" are information encoded in each vertex that contains the direction of the outside of the face
283+
> The algorithms that decide on the color of each pixel are written in programs called **shaders**. Writing shaders is one of the most challenging parts of WebGL and Three.js, but don't worry; Three.js has many built-in materials with pre-made shaders.
220284
221-
Huge library of matcap
222-
[GitHub - nidorx/matcaps: Huge library of matcap PNG textures organized by color](https://github.com/nidorx/matcaps)
223-
create matcap online studio
224-
[Matcap Tweaker](https://www.kchapelier.com/matcap-studio/)
285+
286+
### MeshBasicMaterial
287+
288+
[doc](https://threejs.org/docs/index.html#api/en/materials/MeshBasicMaterial)
289+
290+
```js
291+
/**
292+
* Textures
293+
*/
294+
const textureLoader = new THREE.TextureLoader()
295+
296+
const doorColorTexture = textureLoader.load('./textures/door/color.jpg')
297+
const doorAlphaTexture = textureLoader.load('./textures/door/alpha.jpg')
298+
const doorAmbientOcclusionTexture = textureLoader.load('./textures/door/ambientOcclusion.jpg')
299+
const doorHeightTexture = textureLoader.load('./textures/door/height.jpg')
300+
const doorNormalTexture = textureLoader.load('./textures/door/normal.jpg')
301+
const doorMetalnessTexture = textureLoader.load('./textures/door/metalness.jpg')
302+
const doorRoughnessTexture = textureLoader.load('./textures/door/roughness.jpg')
303+
const matcapTexture = textureLoader.load('./textures/matcaps/1.png')
304+
const gradientTexture = textureLoader.load('./textures/gradients/3.jpg')
305+
doorColorTexture.colorSpace = THREE.SRGBColorSpace
306+
matcapTexture.colorSpace = THREE.SRGBColorSpace
307+
308+
309+
// MeshBasicMaterial
310+
const material = new THREE.MeshBasicMaterial({ map: doorColorTexture })
311+
material.color = new THREE.Color('#ff0000') // 设置material 和 color 不冲突，效果是叠加的
312+
material.wireframe = true;
313+
material.transparent = true;
314+
material.opacity = 0.5; // set opacity should also set transparent=true
315+
material.alphaMap = doorAlphaTexture; // 可以隐藏一部分
316+
material.side = THREE.DoubleSide // default won't be visible on the back side, avoid using DoubleSide whenever possible as it requires more resources
317+
```
318+
319+
其他几种常用的 Material 课程里都有不少详细介绍
320+
321+
- [MeshNormalMaterial](https://threejs.org/docs/#api/en/materials/MeshNormalMaterial)
322+
- [MeshMatcapMaterial](https://threejs.org/docs/#api/en/materials/MeshMatcapMaterial)
323+
- appear illuminated, but it's just an illusion created by the texture, when no light in the scene
324+
- but it will appear all the same regardless of camera orientation
325+
- [MeshDepthMaterial](https://threejs.org/docs/index.html#api/en/materials/MeshDepthMaterial)
326+
- simply color the geometry in white if it's close to the camera's `near` value and in black if it's close to the `far` value of the camera
327+
- [MeshLambertMaterial](https://threejs.org/docs/index.html#api/en/materials/MeshDepthMaterial)
328+
- this material requires light to be seen，比如添加一个氛围灯，AmbientLight
329+
- 加上 light 后会显得 realistic，illumination 效果是真实可信的，不是fake
330+
- most performant material that uses lights
331+
- [MeshPhongMaterial](https://threejs.org/docs/#api/en/materials/MeshPhongMaterial)
332+
- similar to MeshLambertMaterial, less performant than MeshLambertMaterial
333+
- can control the light reflection with `shininess` property, the higher the value, the shinier the surface.
334+
- can also change the color of the reflection by `specular` property
335+
- [MeshToonMaterial](https://threejs.org/docs/#api/en/materials/MeshToonMaterial)
336+
- similar to the MeshLambertMaterial in terms of properties but with a cartoonish style
337+
- *[MeshStandardMaterial](https://threejs.org/docs/#api/en/materials/MeshStandardMaterial)
338+
- use PBR, supports light but with a more realistic algorithm and better parameters like roughness and metalness.
339+
- [MeshPhysicalMaterial](https://threejs.org/docs/index.html#api/en/materials/MeshPhysicalMaterial)
340+
- extension of the MeshStandardMaterial, providing more advanced physically-based rendering properties
341+
- `clearcoat`, simulate a thin layer of varnish on top of the actual material, 上层有一层像玻璃效果
342+
- `sheen`, highlight the material when seen from a narrow angle, 绒毛效果
343+
- `iridescence`, an effect where we can see color artifacts like a fuel puddle, soap bubbles, or even LaserDiscs, 彩虹色的反光，比如灯泡的表面
344+
- `transmission`, enable light to go through the material，某些透明的材料，比如玻璃制品
345+
- [PointsMaterial](https://threejs.org/docs/index.html#api/en/materials/PointsMaterial) handle particles
346+
347+
### Environment map
225348

226349
Environment map is like an image of what's surrounding the scene.
227350
example picture is found from [Poly Haven](https://polyhaven.com/)
228351

229-
clearcoat, varnish glass effect on the top of the material
352+
```js
353+
// add environment map
354+
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
355+
356+
/**
357+
* Environment map
358+
*/
359+
const rgbeLoader = new RGBELoader()
360+
rgbeLoader.load('./textures/environmentMap/2k.hdr', (environmentMap) =>
361+
{
362+
environmentMap.mapping = THREE.EquirectangularReflectionMapping
363+
// apply the scene
364+
scene.background = environmentMap
365+
scene.environment = environmentMap
366+
})
367+
368+
```

0 commit comments

Comments
 (0)