Build: Placing the Frame Tubes

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

tubeBetween

The course's helper: tubeBetween(from, to, radius, name) returns a cylinder mesh whose two ends are exactly the points from and to.

setFromUnitVectors

quaternion.setFromUnitVectors(a, b) sets the quaternion to the shortest turn that takes the unit vector a onto the unit vector b.

ES module

A JavaScript file that exports functions and imports others. src/objects/bike.js exports createBike and main.js imports it.

support check

supportsWebGL2() from Phase 1: it asks the browser for a WebGL 2 context and shows the still image if there is none.

1. 1

   Reverse the ends

   In the example, swap the two arguments of the down tube: tubeBetween(POINTS.headBottom, POINTS.bottomBracket, 0.022, "down-tube"). The console prints the same two lines (centre 0.235, 0.500, 0.000, length 0.6172), because the middle and the length do not care which end is which. The tube now points the other way, which only matters later, when something is attached to one end.

2. 2

   Fatten the top tube

   Change the top tube's radius from 0.018 to 0.05. It becomes a visibly thick beam, centred at the same point. A bigger radius never changes the length or position.

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

import * as THREE from "three";

// Points of the Lumen frame, in metres (side view in the x-y plane, z across the bike, +x is the front).
export const POINTS = {
  bottomBracket: new THREE.Vector3(0, 0.3, 0),
  seatCluster: new THREE.Vector3(-0.1, 0.82, 0),
  headTop: new THREE.Vector3(0.44, 0.84, 0),
  headBottom: new THREE.Vector3(0.47, 0.7, 0),
};

const FRAME = new THREE.MeshStandardMaterial({ color: "#ff6b2c", metalness: 0.4, roughness: 0.35 });
const UP = new THREE.Vector3(0, 1, 0); // a CylinderGeometry stands along y

/** A tube (a thin cylinder) whose two ends are exactly `from` and `to`. */
export function tubeBetween(from, to, radius, name) {
  const along = to.clone().sub(from); // end minus start: the arrow from one end to the other
  const length = along.length();
  const tube = new THREE.Mesh(new THREE.CylinderGeometry(radius, radius, length, 16), FRAME);
  tube.name = name;
  tube.position.copy(from).add(to).multiplyScalar(0.5); // halfway between the ends
  tube.quaternion.setFromUnitVectors(UP, along.normalize()); // turn "up" onto the tube's direction
  return tube;
}

/** The Lumen bike so far: the down tube and the top tube. Wheels at y = 0, facing +x. */
export function createBike() {
  const bike = new THREE.Group();
  bike.name = "bike";
  bike.add(tubeBetween(POINTS.bottomBracket, POINTS.headBottom, 0.022, "down-tube"));
  bike.add(tubeBetween(POINTS.seatCluster, POINTS.headTop, 0.018, "top-tube"));
  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: in Phase 1 the down tube was placed by hand, with a position and rotation.z = -0.8657 that you copied. A whole frame would need an angle worked out for every tube. With tubeBetween you give the two end points from the bike drawing and the function works out the rest. The showroom stops being a stand and starts being a bike.

2. 2

   The four steps. 1. Subtract the start from the end: the arrow along (Topic 2.2). 2. Its length is the cylinder's height. 3. Put the cylinder halfway: (from + to) / 2. 4. A CylinderGeometry stands along y, so turn "up" onto the arrow's direction with quaternion.setFromUnitVectors(up, direction) (a quaternion, Topic 2.6). Every step is something this phase taught.

3. 3

   The numbers. The bike is measured in metres, side view in the x-y plane, front at +x. The bottom bracket is (0, 0.3, 0), the bottom of the head tube is (0.47, 0.7, 0), the seat cluster is (−0.1, 0.82, 0) and the top of the head tube is (0.44, 0.84, 0). The down tube goes from the bracket to the bottom of the head tube: 0.6172 m long, centred at (0.235, 0.5, 0), exactly the numbers Phase 1 gave you. The top tube goes from the seat cluster to the top of the head tube: 0.5404 m long, centred at (0.17, 0.83, 0).

4. 4

   **createBike() returns a group.** The function builds a THREE.Group named "bike" and adds the two tubes to it, named "down-tube" and "top-tube". Later phases add more parts to the same group, and exercises and tests find parts by these names. main.js adds the bike to the scene and turns it together with the stand.

5. 5

   What the showroom can do now that it could not before: show a real frame shape, with tubes that meet at the points of the bike drawing. What is still missing: the seat tube (Phase 3), the rear triangle (Phase 4), the fork, wheels and everything else. The part this phase adds is the top tube; the down tube is rebuilt by tubeBetween in the same place. index.html, the #fallback markup and the support check stay exactly as Phase 1 left them: main.js only gains the import and the bike, and the stand keeps its small orange rim mark from Phase 0 so you can see it turn.

• Explain how a tube between two points gets its position, length and direction

• Add a new tube to the bike with one line

• Say what src/objects/bike.js exports and what main.js does with it

• Say what the showroom can do now and which phase adds the next frame tube