04 — Week 2 Reflection

Debugging log.

Required for the JavaScript + Polish deliverable — what broke while building the interactive feature, what I tried, what actually fixed it.

  1. Broke: the 3D rocket viewer rendered a black screen — only the starfield background was visible, no rocket. Tried: assumed the Three.js model wasn't building — added console logs to check the geometry was actually created (it was). Fixed: the starfield `<canvas>` had no `z-index`, so being later in the HTML it stacked on top of the 3D canvas and hid it completely. Setting `z-index:0` on the starfield and `z-index:1` on the 3D canvas fixed it — a stacking-order bug, not a Three.js bug.
  2. Broke: the animated stat counters fired the moment the page loaded instead of when scrolled into view. Tried: calling the count-up function directly on page load. Fixed: wrapped the counters in an `IntersectionObserver` and only started the animation once the stats section actually entered the viewport, then disconnected the observer so it only runs once.
  3. Broke: the drag-to-rotate on the mini 3D widget felt too sensitive — a small mouse move spun the rocket a full turn. Tried: lowering the rotation multiplier from 0.03 down in small steps while testing by hand. Fixed: settled on a much smaller multiplier (`0.01`) applied to the pointer's `clientX` delta each frame — rotation now roughly matches how far the cursor actually moves.
Back to start Home →