Phase 4 · part: Chain and seat stays
Geometry
Shapes are lists of numbers. Use the built-in shapes, build your own from raw vertices, light them with normals, wrap pictures with UVs and edit them live.
Every 3D shape is the same thing underneath: a list of points (vertices) and a list of triangles that join them. This phase starts with the shapes three.js ships, counts their triangles so you know what each costs, and uses them to build the Lumen bike's frame, wheels and saddle.
Then you open the box. You write a BufferGeometry by hand, one triangle first, then a square, then break it in the ways beginners break it: a missing attribute, the wrong item size, corners listed in the wrong order. Normals (the arrows that tell light which way a surface faces), UV coordinates (where on a picture each corner sits) and bounding boxes (how big a thing is) follow, each with the failure you will meet at work.
It ends with editing geometry while the scene runs, merging shapes into one draw, and the build: the bike's chain stays and seat stays, with a triangle count the showroom reports.
Phase 4 · the brief from Lumen
Kofi, frontend engineer at Lumen Bikes
“The stand turns, but the bike on it is three loose tubes. I need a real frame, and I need to know it will not slow a cheap phone down.”
Kofi owns the showroom code. The tubes from the last phase float in space, and the rear of the frame is missing. Ama sends a sketch: two thin stays on each side of the back wheel, meeting at the axle.
Lena has a warning. Her old Android phone struggles above a few hundred thousand triangles, and nobody on the team knows how many the bike has. Kofi answers the only way a 3D developer can: count. Each shape has a triangle price, the status bar shows the total, and the bike's own code can report it.
By the end the frame has its rear triangle, the bike reports its triangle count, and Kofi knows what a tube, a wheel and a saddle cost.
At this station
You will learn
- Pick a built-in shape, set its segments and say how many triangles it costs
- Write a BufferGeometry by hand with positions, an index, normals and UVs, and fix the usual mistakes
- Measure, centre, edit and merge geometry, and know when the GPU copy needs updating
- Add the chain stays and seat stays to the bike and report its triangle count
You write code in
In your lumen-3d project (npm run dev) and in the editor on this page
Files you touch
- src/objects/bike.js
Work order · 7 steps
- 4.1Built-in Geometriesthree.js ships ready-made shapes: box, sphere, cylinder, torus, plane, capsule and tube. Each is a grid of vertices joined into triangles, and the segment numbers you pass decide how round it looks and how many triangles it costs. 19 min 2 live scenes
- 4.2Build the Bike from ShapesA bicycle is tubes, rings and a few blobs. You build the whole Lumen frame from cylinders, tori and a capsule, aim each tube between two points, group paired parts, and count what each part costs. 23 min 2 live scenes
- 4.3BufferGeometry from ScratchUnder 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. 22 min 3 live scenes
- 4.4NormalsA normal is a short arrow, one per vertex, that says which way the surface faces. Light is worked out from it. Sharing or splitting vertices decides whether an edge looks smooth or sharp, and a missing, zero or inverted normal gives the most confusing lighting bugs. 21 min 2 live scenes
- 4.5UVs and Bounding BoxesUV coordinates say where each vertex sits on a picture, so a flat image can wrap a 3D shape. Bounding boxes and spheres say how big and where a shape is, so you can centre it, fit the camera to it and let three.js skip it when it is off screen. 21 min 2 live scenes
- 4.6Editing GeometryA geometry is not frozen. You can change vertices every frame (and must tell the GPU with needsUpdate), draw only part of a shape with setDrawRange, and merge many shapes into one so the GPU draws them in a single call. 21 min 3 live scenes
- 4.7Build: The Chain Stays and Seat StaysbuildThe bike gets the rear triangle of its frame: a pair of chain stays and a pair of seat stays, built from cylinders in bike.js, and the showroom now reports how many triangles the bike costs. 19 min 1 live scene
Quality control · 4 tests
Build it yourself, press Check, and the page tests the scene you made: what is in it, where it sits, what it costs the GPU.
sail from a BufferGeometry that you fill yourself: three vertices, no index, positions in a Float32Array.BeginnerQC-02Flip the quadA square panel named panel is in the scene and you cannot see it, though the status bar counts its 2 triangles.BeginnerQC-03Centre the crate and put it on the floorThe crate arrives off to the side and floating: its geometry was moved by (2, 3, 1) when it was made.IntermediateQC-04Build the rear triangleThe scene has a tubeBetween helper and the bike's down tube. Add the two pairs of stays to the bike group: a group named chain-stays (bottom bracket to rear axle) and a group named seat-stays (seat cluster to rear axle).Intermediate