➩ THREE.ShapeGeometry produces triangles representing a flat 2D shape (THREE.Shape): Doc.

➩ THREE.ExtrudeGeometry produces triangles representing extruded 2D shape (THREE.Shape): Doc.

➩ THREE.LatheGeometry produces triangles representing a surface of revolution around the Y axis (a list of points in 2D or THREE.Vector2): Doc.

➩ THREE.TubeGeometry produces triangles representing a generalized cylinder (circles moving along a path) along a curve (THREE.Curve): Doc.

➩ THREE.Shape.moveTo(x, y); THREE.Shape.lineTo(x, y);

➩ THREE.Shape.arc(x, y, r, a0, a1); THREE.Shape.ellipse(x, y, rx, ry, a0, a1);

➩ THREE.Shape.quadraticCurveTo(x1, y1, x2, y2); THREE.Shape.bezierCurveTo(x1, y1, x2, y2, x3, y3);

➩ THREE.LineCurve3(v1, v2);

➩ THREE.QuadraticBezierCurve3(v1, v2, v3);

➩ THREE.CubicBezierCurve3(v1, v2, v3, v4);

➩ THREE.CatmullRomCurve3([v1, v2, ...], closed, "catmullrom", tension);, default tension is 0.5.

➩ Parametric: \(\left(x, y, z\right) = f\left(u, v\right)\).

➩ Implicit: \(f\left(x, y, z\right) = 0\).

➩ Procedural or subdivision.

➩ It splits each triangle into three quads.

➩ It splits each quad into four smaller quads

➩ The quads have the original vertices, midpoints of the original edges, and centers of the original faces.

➩ The limit surface is a \(C\left(2\right)\) B-spline surface (except at some "extraordinary vertices", it is \(C\left(1\right)\).

➩ It splits each triangle into four smaller triangles.

➩ The triangles have the original vertices, midpoints of the original edges, and centers of the original faces.

➩ The limit surface is a \(C\left(2\right)\) B-spline surface (except at some "extraordinary vertices", it is \(C\left(1\right)\).

➩ Pass multiple transformation matrices (matrix palette).

➩ Each vertex specifies which matrix it is part of (can be a vector of weights, which allows blending).

➩ A vertex can be in multiple transformations (multiple coordinate systems, weighted): \(p = w_{1} M_{1} p_{0} + w_{2} M_{2} p_{0} = \left(w_{1} M_{1} + w_{2} M_{2}\right) p_{0}\).

➩ Emissive: object itself produces light.

➩ Ambient: surface color of the object.

➩ Diffuse: \(\hat{N} \cdot \hat{L}\), where \(\hat{N}\) is the surface normal, \(\hat{L}\) is the direction of the light source: Wikipedia.

➩ Specular: \(\left(\hat{E} \cdot \hat{R}\right)^{p} = \left(\hat{E} \cdot \left(2 \left(\hat{L} \cdot \hat{N}\right) \hat{N} - \hat{L}\right)\right)^{p}\), where \(\hat{E}\) is the direction of the camera (E stands for eye), \(R\) is the direction of the perfect mirror reflection of the light source, \(p\) is the Phong exponent for shininess: Wikipedia

➩ They do not change the side view.

➩ They do not change the shape (geometry) or the triangles.

➩ They do not cause occlusions or shadows.

➩ Every point on the triangle can be represented by its Barycentric coordinate (similar to the u position on a curve, but with two parameters): \(p = \alpha p_{1} + \beta p_{2} + \gamma p_{3}\) where \(p_{1}, p_{2}, p_{3}\) are vertices of the triangle.

➩ The corresponding point on the texture image can be found as: \(\begin{bmatrix} u \\ v \end{bmatrix} = \alpha \begin{bmatrix} u_{1} \\ v_{1} \end{bmatrix} + \beta \begin{bmatrix} u_{2} \\ v_{2} \end{bmatrix} + \gamma \begin{bmatrix} u_{3} \\ v_{3} \end{bmatrix}\) where \(\begin{bmatrix} u_{1} \\ v_{1} \end{bmatrix} , \begin{bmatrix} u_{2} \\ v_{2} \end{bmatrix} , \begin{bmatrix} u_{3} \\ v_{3} \end{bmatrix}\) are the UV values associated with \(p_{1}, p_{2}, p_{3}\) respectively.

➩ For THREE.MeshStandardMaterial, there are metalnessMap, roughnessMap.

➩ For THREE.MeshPhongMaterial or THREE.MeshLambertMaterial, there is specularMap.

➩ For both, there are alphaMap (transparency), aoMap (ambient occlusion, or pre-computed self-shadow), emissiveMap (glow), lightMap (pre-computed light).

➩ Place a camera at the light source.

➩ Take a picture: the objects that are not visible to the light will create shadow.

➩ Use this picture as the texture (shadow map) of the object.

➩ Tell the lights to cast shadow: THREE.PointLight.castShadow = true;

➩ Tell the objects to cast shadow: THREE.Mesh.castShadow = true;

➩ Tell the objects to receive shadow: THREE.Mesh.receiveShadow = true;

➩ Tell the renderer to do do this: THREE.WebGLRenderer.shadowMap.enabled = true;.

➩ Draw the scene without reflection.

➩ Use a camera (cube camera) to take a picture at the position of the object.

➩ Use this picture as the texture (environment map) of the object.

➩ Repeat this multiple times.

➩ Create a let camera = new THREE.CubeCamera(near, far, new THREE.WebGLCubeRenderTarget(size));: Doc.

➩ Change the position of the cube camera and take a picture using camera.update(renderer, scene);. It might be useful to make obj.visible = false; before taking the picture and obj.visible = true; after taking the picture.

➩ This can only be done once in THREE.js (cannot have reflections in reflections using just environment maps): Doc.