\( \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\#2\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\#2\\#3\\#4 \end{array}\right]} \newcommand{\Choose}[2]{ { { #1 }\choose{ #2 } } } \newcommand{\vecII}[2]{\left[\begin{array}{c} #1\\#2 \end{array}\right]} \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\#2\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\#2\\#3\\#4 \end{array}\right]} \newcommand{\matIIxII}[4]{\left[ \begin{array}{cc} #1 & #2 \\ #3 & #4 \end{array}\right]} \newcommand{\matIIIxIII}[9]{\left[ \begin{array}{ccc} #1 & #2 & #3 \\ #4 & #5 & #6 \\ #7 & #8 & #9 \end{array}\right]} \)

Quiz

  1. Could you explain more about boxGeometryWithMaterialGroups and where did the three numbers (2,4,6) come from: 
            const box2geom = boxGeometryWithMaterialGroups(2, 4, 6);

    We'll go over all that code, for sure. But the 2,4,6 are just the dimensions (width, height, depth) of the box, respectively.

  2. We went over mesh last class but I was still a little confused about boxMesh when I was going through the reading (I apologize that this confusion is about the GUI reading but I forgot to ask it in the other quiz). Could you explain the concept again please?

    No worries. A mesh is just a combination of a geometry (e.g. sphere versus box) and a material (e.g. steel versus wood).

    Both are necessary for rendering (drawing) the object, but it makes sense to modularize the software to represent them with different objects. So: 

    
const boxGeom = new THREE.BoxGeometry(2,4,6);
const boxMat = new THREE.MeshBasicMaterial({color: 'white'});
const boxMesh = new THREE.Mesh( boxGeom, boxMat );
scene.add(boxMesh);

    Or even: 

    
const boxGeom = new THREE.BoxGeometry(2,4,6);
const ballGeom = new THREE.SphereGeometry(5);
const redMat = new THREE.MeshBasicMaterial({color: 'red'});
const greenMat = new THREE.MeshBasicMaterial({color: 'green'});
// combine them; mix and match
const redBall = new THREE.Mesh( ballGeom, redMat );
const greenBox = new THREE.Mesh( boxGeom, greenMat );
scene.add(redBall);
scene.add(greenBox);
// etc
  3. What are the key differences between creating custom geometry in the old way (using THREE.Geometry) and the new way (using THREE.BufferGeometry) in Three.js, and how do they impact performance and ease of use?

    The new way uses "flattened" typed arrays rather than more intuitive data structures.

    The flattened, typed arrays can be processed directly by the WebGL code running on the graphics card, so it's faster.

  4. What is the difference between using coordinates to locate/create vertices vs. normal vectors? Why do we need both?

    Do you mean "normal" like "not abnormal" or do you mean "normal" like "perpendicular"?

    Normal (perpendicular) vectors aren't used to locate something; only to orient it. I'll demonstrate with the barn.

    But we will learn about surface normals soon. This is just a preview.

  5. What does computeFlatVertexNormals() do? Why is it needed to mesh?

    Sometimes we need to know how a face is oriented: its surface normal. That function computes surface normals for all the flat faces. Alas, it was for the old geometry and has been removed.

  6. Is buffer geometry how three.js refers to the new way of representing custom geometry?

    Yes.

  7. I'm a bit confused with the quad function.

    Of course you are! We'll go through it very carefully.

  8. Can you re-explain groups/the associated information in Faces,Indexes, Vertices section?

    For sure. A "group" is a bunch of faces (triangles) that have a common materialIndex.

    For example, the three triangles of the front/back of the barn might have material indexes of 0/2, and correspond to the those indexes in an array of materials.