three.js

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

render

1
2
3
4

const renderer = new WebGLRenderer({
   antialias: true, // turn on anti-aliasing, to blur the edges of square pixels.
 });
 renderer.physicallyCorrectLights = true; // 

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
2
3

mesh.position.x = 1;
// or
mesh.position.set(1,2,3);

scaling

• created from Vector3 class, stored in the .scale property

• Use a negative value will mirror the object

• Cameras 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
2
3

mesh.scale.x = 1;
// or
mesh.scale.set(1,2,3);

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(likegimbal lock万向锁), while the later is harder to use

• Angles in three.js are specified using radians, not degrees, except PerspectiveCamera.fov

  1 2 3 4 5 6 7 8

  import { 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 else

  1 2 3 4

  1 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 12

  mesh.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 4

    1 0 0 0 0 cos sin 0 0 -sin cos 0 0 0 0 1

  • y-axis

    1 2 3 4

    cos 0 sin 0 0 1 0 0 -sin 0 cos 0 0 0 0 1

  • z-axis

    1 2 3 4

    cos -sin 0 0 sin cos 0 0 0 0 1 0 0 0 0 1

Sine Wave