A square: indexed, not indexed, backwards
Four quads in a row. From the left: indexed (orange), not indexed (blue), backwards winding (white: missing), backwards with DoubleSide (green).
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
indexed 4 vertices, 2 triangles, 48 bytes of positions
not indexed 6 vertices, 2 triangles, 72 bytes of positions
backwards winding 4 vertices, 2 triangles, 48 bytes of positions
backwards, DoubleSide 4 vertices, 2 triangles, 48 bytes of positions
triangles counted: 8 (the backwards one is sent to the GPU, then skipped)