➩ let normals = new Float32Array([x0, y0, z0, x1, y1, z1, ...]);

➩ geometry.setAttribute("normal", new THREE.BufferAttribute(normals, 3));

➩ let colors = new Float32Array([r0, g0, b0, r1, g1, b1, ...]);

➩ geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));

➩ A color per object by setting the color of the materials.

➩ A color per triangle by setting the same color for all three vertices of the triangle.

➩ A color per vertex, the points in the middle are interpolated (called Barycentric interpolation: Wikipedia.

➩ They are difficult to keep track of.

➩ Transforming and rendering them can be costly. 

➩ Triangles smaller than pixels have sampling issue.

➩ Specify three points on an image (using UV coordinate system: u from 0 to 1 representing left to right, and v from 0 to 1 representing bottom to top of the image).

➩ Map the triangle on the image to the triangle in the BufferGeometry.

➩ let uvs = new Float32Array([u0, v0, u1, v1, ...]);

➩ geometry.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));

➩ THREE.ClampToEdgeWrapping clamps the value to 0 (when less than 0) or 1 (when larger than 1).

➩ THREE.RepeatWrapping repeats the texture with the same direction (0 to 1, 0 to 1, 0 to 1, ...).

➩ THREE.MirroredRepeatWrapping repeats the texture and flips the direction on every repeat (0 to 1, 1 to 0, 0 to 1, ...).

➩ 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.