BBAnchor

A component using AABB (Axis-aligned bounding boxes) to offset children position by specified multipliers (anchor property) on each axis. You can use this component to change children positioning in regard of the parent's bounding box, eg. pinning Html component to one of the parent's corners. Multipliers determine the offset value based on the AABB's size:

childrenAnchor = boundingBoxPosition + (boundingBoxSize * anchor / 2)

<BBAnchor
  anchor // THREE.Vector3 or [number, number, number]
  {...groupProps} // All THREE.Group props are valid
>
  {children}
</BBAnchor>

For instance, one could want the Html component to be pinned to positive x, positive y, and positive z corner of a Box object:

<Box>
  <BBAnchor anchor={[1, 1, 1]}>
    <Html center>
      <span>Hello world!</span>
    </Html>
  </BBAnchor>
</Box>

src/core/BBAnchor.tsx

Edit this page