Skip to content

fix(hero): aim the hero camera at the crystal so it renders centred in the canvas - #61

Merged
Bissbert merged 1 commit into
mainfrom
fix/hero-crystal-camera-lookat
Jul 17, 2026
Merged

fix(hero): aim the hero camera at the crystal so it renders centred in the canvas#61
Bissbert merged 1 commit into
mainfrom
fix/hero-crystal-camera-lookat

Conversation

@Bissbert

Copy link
Copy Markdown
Contributor

Summary

  • R3F treats the Canvas camera prop as construction-only and never calls lookAt, so the custom-positioned hero camera faced world -Z instead of the crystal, leaving it off-centre (low) in its plate even after the earlier geometry.center() fix.
  • Added onCreated={({ camera }) => camera.lookAt(0, 0, 0)} so the optical axis runs through the crystal's centroid (already at the origin).
  • Removed the now-redundant drei <Center> wrapper, which offsets by the axis-aligned bbox and is imperfect around a rotating child.

Test plan

  • Browser-verified with pixel analysis: crystal centroid within ~0.3% of plate centre
  • Stays centred through rotation
  • Static and centred under reduced motion
  • Both themes + mobile OK
  • No console errors
  • Build clean

…n the canvas

R3F treats the Canvas `camera` prop as construction-only and never calls lookAt, so the custom-positioned hero camera faced world -Z instead of the crystal — leaving it off-centre (low) in its plate even after the earlier geometry.center() fix. Added onCreated camera.lookAt(0,0,0) so the optical axis runs through the crystal's centroid (already at the origin), and removed the now-redundant drei <Center> wrapper (which offsets by the axis-aligned bbox and is imperfect around a rotating child). Browser-verified with pixel analysis: crystal centroid within ~0.3% of plate centre, stays centred through rotation, static+centred under reduced motion, both themes + mobile OK, no console errors. Build clean.
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying gemmology-dev with  Cloudflare Pages  Cloudflare Pages

Latest commit: 7a8073e
Status:🚫  Build failed.

View logs

@github-actions

Copy link
Copy Markdown

🚀 Preview deployed to: https://d105e10a.gemmology-dev.pages.dev

@Bissbert
Bissbert merged commit 320b58a into main Jul 17, 2026
5 of 6 checks passed
@Bissbert
Bissbert deleted the fix/hero-crystal-camera-lookat branch July 17, 2026 08:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant