# notes_graphic

*555*

*3*

*NOTES*

*2021-11-17*

*2024-09-17*

# three.js

**PBR****anti-aliasing** 反锯齿**multi-sample anti-aliasing** 多重采样, this is a build-in WebGL method, depending on GPU

## render

1 | const renderer = new WebGLRenderer({ |

## camera

two types of camera

**perspective projection 透视投影**, the area in between the`Near Clipping Plane`

and`the Far Clipping Plane`

is the**camera’s viewing frustum**.- field of view: how wide the camera’s view is, in degrees.
- aspect ratio
- near: defines the small end of the frustum. anything closer to the camera than this will be invisible.
- far: defines the large end of the frustum. anything further away from the camera than this will be invisible.

**orthographic projection 正投影**

## light

**Direct lighting**: light rays that come directly from the bulb and hit an object.**Indirect lighting**: light rays that have bounced off the walls and other objects in the room before hitting an object, changing color, and losing intensity with each bounce.

four types of light

- DirectionalLight => Sunlight
- PointLight => Light Bulbs
- RectAreaLight => Strip lighting or bright windows
- SpotLight => Spotlights

## transformation

### translating

- created from
`Vector3`

class, stored in the`.position`

property

1 | mesh.position.x = 1; |

### scaling

created from

`Vector3`

class, stored in the`.scale`

propertyUse a

`negative value`

will mirror the objectCameras and Lights Cannot be Scaled

`Uniform Scaling`

, use the same value for all three axes`Non-Uniform Scaling`

, to scale individual axes`x`

, the object will become wider or narrower`y`

, the object will become taller or shorter`z`

, the depth of the object will be affected

1 | mesh.scale.x = 1; |

### Rotation

Two Rotation Class

- Using
`Euler angles`

, represented using the`Euler class`

and stored in the`.rotation`

property. - Using
`quaternions`

, represented using the`Quaternion class`

and stored in the`.quaternion`

property. - the both can be used interchangeably. but in particular, the former has some short comings(like
`gimbal lock万向锁`

), while the later is harder to use

- Using
Angles in three.js are specified using

`radians`

, not degrees, except`PerspectiveCamera.fov`

1

2

3

4

5

6

7

8import { MathUtils } from 'three';

/**

* convert from degrees to radians.

* π = Math.PI

* 360∘ = 2π

* 90∘ = π/2

*/

const rads = MathUtils.degToRad(90); // 1.57079... = π/2

### transformation matrix

stored in the Object3D.matrix property

`local matrix and word matrix`

, the former is relative to parent and stored in the`.matrix`

property, while the later is relative to world space and stored in the`.matrixWorld`

property`identity matrix`

: all ones on the main diagonal and zeros everywhere else1

2

3

41 0 0 0

0 1 0 0

0 0 1 0

0 0 0 1`matrix of translating and scaling`

1

2

3

4

5

6

7

8

9

10

11

12mesh.position.x = Tx;

mesh.position.y = Ty;

mesh.position.z = Tz;

mesh.scale.x = Sx;

mesh.scale.y = Sy;

mesh.scale.z = Sz;

Sx 0 0 Tx

0 Sy 0 Ty

0 0 Sz Tz

0 0 0 1`matrix of rotation`

cos(degree) 余弦

sin(degree) 正弦x-axis

1

2

3

41 0 0 0

0 cos sin 0

0 -sin cos 0

0 0 0 1y-axis

1

2

3

4cos 0 sin 0

0 1 0 0

-sin 0 cos 0

0 0 0 1z-axis

1

2

3

4cos -sin 0 0

sin cos 0 0

0 0 1 0

0 0 0 1