Build: The Chain Stays and Seat Stays

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

chain stay

One of two thin tubes running from the bottom bracket (where the pedals turn) back to the rear axle, one on each side of the rear wheel.

seat stay

One of two thin tubes running from near the top of the seat tube down to the rear axle.

rear triangle

The back part of the frame: seat tube, chain stays and seat stays together.

turntable

A group that holds the stand and the bike, so turning it turns both.

1. 1

   Make it yours

   Replace your src/objects/bike.js with the file below and look at the dev server's page. You should see the orange frame with its rear triangle turning on the stand. Open the browser console: you should see five part lines and bike: 448 triangles.

2. 2

   Halve the sides

   In the live example change CylinderGeometry(radius, radius, length, 16) to use 8 sides. The console now reports 224 triangles for the bike (32 per tube, 64 per pair) and the status bar shows 8 draw calls: halving the sides halves the triangles and does not change the draw calls.

Your lumen-3d project after this topic. Click a file to see it in full.

import * as THREE from "three";

const frameMaterial = new THREE.MeshStandardMaterial({ color: "#ff6b2c", metalness: 0.4, roughness: 0.35 });
const UP = new THREE.Vector3(0, 1, 0);
const STAY_Z = 0.055; // the stays come in pairs, one each side of the middle

// A cylinder between two points (from Phase 2).
export function tubeBetween(from, to, radius, name) {
  const direction = new THREE.Vector3().subVectors(to, from);
  const length = direction.length();
  const tube = new THREE.Mesh(new THREE.CylinderGeometry(radius, radius, length, 16), frameMaterial);
  tube.name = name;
  tube.position.copy(from).add(to).multiplyScalar(0.5); // halfway between the two ends
  tube.quaternion.setFromUnitVectors(UP, direction.normalize()); // turn the cylinder's axis onto the direction
  return tube;
}

// A left and a right tube in one group, so a part with two sides is one named thing.
function tubePair(from, to, radius, name) {
  const pair = new THREE.Group();
  pair.name = name;
  for (const [side, z] of [["left", -STAY_Z], ["right", STAY_Z]]) {
    pair.add(tubeBetween(from.clone().setZ(z), to.clone().setZ(z), radius, name + "-" + side));
  }
  return pair;
}

// How many triangles an object (and everything inside it) sends to the GPU.
export function countTriangles(object) {
  let triangles = 0;
  object.traverse((o) => {
    if (o.isMesh) triangles += o.geometry.index ? o.geometry.index.count / 3 : o.geometry.attributes.position.count / 3;
  });
  return triangles;
}

export function createBike() {
  const BB = new THREE.Vector3(0, 0.3, 0); // bottom bracket
  const rearAxle = new THREE.Vector3(-0.55, 0.35, 0);
  const seatCluster = new THREE.Vector3(-0.1, 0.82, 0);
  const headTop = new THREE.Vector3(0.44, 0.84, 0);
  const headBottom = new THREE.Vector3(0.47, 0.7, 0);

  const bike = new THREE.Group();
  bike.name = "bike";
  bike.add(
    tubeBetween(BB, headBottom, 0.022, "down-tube"),
    tubeBetween(seatCluster, headTop, 0.018, "top-tube"),
    tubeBetween(BB, seatCluster, 0.02, "seat-tube"),
    tubePair(BB, rearAxle, 0.013, "chain-stays"), // new in Phase 4
    tubePair(seatCluster, rearAxle, 0.012, "seat-stays"), // new in Phase 4
  );
  for (const part of bike.children) console.log(part.name.padEnd(12), countTriangles(part), "triangles");
  console.log("bike:", countTriangles(bike), "triangles");
  return bike;
}

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: Kofi's story question was "how many triangles is the bike, and will Lena's phone cope?" This build adds the missing rear frame and answers it with code: countTriangles(object) adds up the triangles of every mesh inside a group, and createBike() prints the total. A budget you can print is a budget you can test later (Phase 17).

2. 2

   What it adds. src/objects/bike.js gains two groups, chain-stays and seat-stays, each holding a left and a right cylinder built with the same tubeBetween as the front triangle. A helper tubePair(from, to, radius, name) runs the loop over z = ±0.055. The bike now holds five named parts: down tube, top tube, seat tube, chain stays and seat stays.

3. 3

   How it plugs in. Phase 3's main.js already calls createBike() and turns it with the stand on a turntable, so this phase changes one file, src/objects/bike.js. The stays appear by themselves, and createBike() prints each part's triangles and the total to the console.

4. 4

   What the showroom can do now that it could not before. It has a complete frame: front triangle and rear triangle, every tube at the right place and size, grouped under names a test can find. It can say how much geometry it holds: 448 triangles for the frame, 7 draw calls. A cylinder costs 64 triangles at 16 sides whatever its length, so the frame is cheap.

5. 5

   What is still missing. The frame is only geometry with a flat paint colour; real materials and lights come in Phase 5, together with the fork. The wheels are Phase 6 (front) and Phase 7 (rear), the handlebar Phase 8. Nothing can be clicked or loaded yet.

• Your bike.js builds the stays as two named groups of two tubes

• Your page turns the stand and the bike together

• The console prints bike: 448 triangles