Draggable and Moveable 3D Hex Grid with R3F

[tommmyngo]

https://codesandbox.io/s/three-fiber-hex-grid-y0uzjx
Pan with Middle mouse
Rotate with Right mouse
Zoom with Scroll

Pretty cool that Three.js cylinder mesh radius dimensions match up 1:1 with the Hex radius in defineHex so you can use it to space out your grid however

[tommmyngo]

Related question: Is there a reason why the first hex.center otherwise (0 , 0) doesn't start at {x : 0 , y : 0} but instead { x: 0.8660254037844386, y: 1 }?

[flauwekeul]

You mean this?

const Hex = defineHex()
const hex = new Hex()
hex.origin // { x: 0, y: 0 }
hex.center // { x: 0.8660254037844386, y: 1 }

center is implemented like this:

get center(): Point {
  const { width, height, x, y } = this
  return { x: width / 2 - x, y: height / 2 - y }
}

So it returns the origin point relative to Hex([0, 0]) (which is [0, 0] for Hex([0, 0])), but subtracted from the top left point. In other words: center is relative to Hex([0, 0])'s top left point and not its origin. This doesn't seem to make a lot of sense 😅

I'll just write down my thoughts, I hope you (and future me) understand my ramblings:

Maybe I should change it to return the center point of a hex relative to its origin (which is probably what it's supposed to do in the first place). A hex's origin is relative to its center, so the default origin of [0, 0] means the center of the hex, center would also be [0, 0]:

const Hex = defineHex()
const hex = new Hex()
hex.origin // { x: 0, y: 0 }
hex.center // { x: 0, y: 0 }

But if origin is set to 'topLeft' when creating the Hex class, any hex's origin would be { x: -0.8660254037844386, y: -1 } (given the default dimensions of 1) and its center should be { x: 0.8660254037844386, y: 1 } (to get back to the center of the hex from the origin).

const Hex = defineHex({ origin: 'topLeft' })
const hex = new Hex()
hex.origin // { x: -0.8660254037844386, y: -1 }, relative to the visual center
hex.center // { x: 0.8660254037844386, y: 1 }, relative to origin

center would be the same value for any hex (just like origin is); it won't be relative to the Hex([0, 0]) as it is now. Currently, corners is also relative to Hex([0, 0]), but I should change that as well. corners should also be relative to origin (same value for all hexes). It is convenient though to get a point relative to Hex([0, 0]), but I should either add a utility function for that or create variants of center and corners (and maybe even origin). Maybe absCenter, absCorners and absOrigin?

Or maybe I should just remove center, because to get any hex's origin point relative to Hex([0, 0])'s origin point, you can just use x and y.