Positioning objects from a specific origin or position relatively

[hazem3500]

When positioning an object in THREE.js it gets positioned from its center.

<Canvas>
   <Box args={[1, 1, 1]} />
   <Plane />
</Canvas>

To make its bottom align with the plane where y equals 0, you'll need to position it with a y value with half its height.

<Canvas>
  <Box args={[1, 1, 1]} position={[0, 0.5, 0]} />
  <Plane />
</Canvas>

There is an issue related to this on the THREE.js repo here

I was wondering if there could be a drei helper that could help with pivoting an object by giving it a "transform-origin"

I've created an example on codesandbox