What breaks: missing and wrong attributes
Four mistakes, none of which stops the page (case 4 throws, and is caught). Case 1 draws nothing. Case 2 is not drawn on purpose: three.js would log a long warning with an object dump. Case 3 reads past the last vertex: what you see is up to the browser and driver. Here a triangle with a made-up third corner is drawn; elsewhere it may be skipped with a WebGL warning.
Under every shape is a BufferGeometry: typed arrays of numbers. You write one triangle by hand, then a square two ways (indexed and not), learn why a triangle can vanish when its corners go the wrong way round, and see what breaks when an attribute is missing or the wrong size.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a triangle in the xz plane lying flat (corners at (−1, 0, 1), (1, 0, 1), (0, 0, −1)) that is visible from above. Which order of corners must you use?
Write an indexed quad with a uv attribute that shows the whole picture, and print uv.count and position.count.
Explain it without notes
What does new THREE.BufferAttribute(array, 3) tell three.js, and what happens to count if you pass 2 instead?
Why can a triangle that is counted by the status bar still be invisible?
Console
Nothing logged yet.Expected console output
1. no position attribute
2. itemSize 2 -> vertices: 4.5
3. index 5 with only 3 vertices
4. THREE.BufferAttribute: array should be a Typed Array.
triangles counted: 1