# Rhumb Line – explore a 3D ship's cabin to find the coffee

**URL:** <https://discourse.threejs.org/t/rhumb-line-explore-a-3d-ships-cabin-to-find-the-coffee/94404>\
**Category:** Showcase\
**Created:** [September 16, 2026, 12:02pm UTC](https://discourse.threejs.org/t/rhumb-line-explore-a-3d-ships-cabin-to-find-the-coffee/94404 "2026-09-16T12:02:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shocking\_Mike](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shocking_mike/32/72503_2.png) [@Shocking\_Mike](https://discourse.threejs.org/u/Shocking_Mike)\
**Post date:** [September 16, 2026, 12:02pm UTC](https://discourse.threejs.org/t/rhumb-line-explore-a-3d-ships-cabin-to-find-the-coffee/94404/1 "2026-09-16T12:02:35Z")

</div>

I made **Rhumb Line Coffee Roasters** , a concept landing page for a fictional coffee roaster. Instead of scrolling through sections, you sit at a chart table in a ship’s cabin out at sea and explore the desk.

**Live:** [Rhumb Line Coffee Roasters · Six origins, one voyage](https://shockingmike.github.io/rhumb-line/)

 ![rhumb-line-01-desk](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/5/e5a37140ff024b4aa54b591fdf0d2a01a0801fcc.jpeg)

### Every object on the desk is a section

9 objects are clickable. The camera flies straight from one to the next, and a hint suggests where to look next.

The compass opens “Steer by taste”, a flavour wheel you turn until one flavour family points north.

 ![rhumb-line-02-compass](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/5/955cc7ba74c23045a590ac39b5e2f42525d83067.jpeg)

The crew list is a four-question quiz that finds you a plan, an origin and a grind.

 ![rhumb-line-03-crew-quiz](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/4/545546b8709f3e854cde955464008ffdc1fcba0b.jpeg)

The coffee cup shows today’s brew and four ways to make it at home.

 ![rhumb-line-04-cup](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/8/a89a40f128c312fe421e07f8547afbf003d51824.jpeg)

### A voyage for six coffees

Pick a port on the chart and the ship sails there, with a timelapse through dusk, night and dawn. On arrival you get the ship’s log for that leg and one bag of beans for the sample chest. There are six to find.

 ![rhumb-line-05-sailing](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/a/2ab63ad3ae350130c911a7cf52c0156d4b8efda0.jpeg)

 ![rhumb-line-06-leg](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/d/fdc3a0f44ea1c3e4c32c3cbb882c01a5957deb99.jpeg)

### Weather, loading and phones

Click the porthole and a storm rolls in, with rain on the glass and a darker cabin.

 ![rhumb-line-07-storm](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/1/719061a566780eaf25ac217f853a72fb8d94e0ae.jpeg)

The loader follows real loading progress. At 100% its paper chart shrinks into the 3D chart on the desk.

 ![rhumb-line-08-loader](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/8/f85dddf47ce35b5a4d3ec33b82ff16807b10ffcd.jpeg)

On phones it is the same scene, with the objects in a bottom bar.

 ![rhumb-line-09-mobile](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/d/5d2f23431fb9a9f4bf950768c2efda676ab4e270.jpeg)

### Tech

- three.js r186. No 3D model files and no texture images: geometry and materials are generated in code. The only images are the coffee photos inside the panels.
- `MeshPhysicalMaterial` with clearcoat and transmission for porcelain, lacquer, enamel and glass, plus PMREM environment lighting and PCF shadows.
- Post-processing: GTAO → depth of field → bloom → ACES tone mapping → colour grade (vignette, grain) → SMAA.
- The scene never stops moving: hull roll, a swinging lamp, the sea, steam from the cup. If the frame rate stays low, it lowers render quality instead of freezing the motion.
- Without WebGL or JavaScript you get a regular scrolling page.

I’d love feedback, especially on how it runs on your machine and whether the navigation feels clear.

---

<div class="post-metadata">

**Author:** ![red-reddington](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/red-reddington/32/68861_2.png) [@red-reddington](https://discourse.threejs.org/u/red-reddington)\
**Post date:** [September 17, 2026, 3:56am UTC](https://discourse.threejs.org/t/rhumb-line-explore-a-3d-ships-cabin-to-find-the-coffee/94404/2 "2026-09-17T03:56:03Z")

</div>

Very artistic. Bravo for the concept!

On mobile, pinch-zoom currently scales the browser viewport instead of the Three.js camera, which produces heavy pixelation even though the geometry is clean. Adding maximum-scale=1, user-scalable=no to the viewport meta lets the scene own the gesture.

---

<div class="post-metadata">

**Author:** ![Shocking\_Mike](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shocking_mike/32/72503_2.png) [@Shocking\_Mike](https://discourse.threejs.org/u/Shocking_Mike)\
**Post date:** [September 18, 2026, 2:36am UTC](https://discourse.threejs.org/t/rhumb-line-explore-a-3d-ships-cabin-to-find-the-coffee/94404/3 "2026-09-18T02:36:32Z")

</div>

Thanks!! will definitely check on that

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [September 18, 2026, 3:45am UTC](https://discourse.threejs.org/t/rhumb-line-explore-a-3d-ships-cabin-to-find-the-coffee/94404/4 "2026-09-18T03:45:58Z")

</div>

Great vibes, and verrry nice/clean presentation!  
The art direction is fantastic.  
Feels super quality. 😃

---

<div class="post-metadata">

**Author:** ![Shocking\_Mike](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shocking_mike/32/72503_2.png) [@Shocking\_Mike](https://discourse.threejs.org/u/Shocking_Mike)\
**Post date:** [September 18, 2026, 3:59am UTC](https://discourse.threejs.org/t/rhumb-line-explore-a-3d-ships-cabin-to-find-the-coffee/94404/5 "2026-09-18T03:59:01Z")

</div>

Thank you hehe

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [September 18, 2026, 4:18am UTC](https://discourse.threejs.org/t/rhumb-line-explore-a-3d-ships-cabin-to-find-the-coffee/94404/6 "2026-09-18T04:18:37Z")

</div>

Very cool … Santos, São Paulo - Brazil … 😉