Outlines

Outlines

An ornamental component that extracts the geometry from its parent and displays an inverted-hull outline. Supported parents are <mesh>, <skinnedMesh> and <instancedMesh>.

type OutlinesProps = JSX.IntrinsicElements['group'] & {
  /** Outline color, default: black */
  color: ReactThreeFiber.Color
  /** Line thickness is independent of zoom, default: false */
  screenspace: boolean
  /** Outline opacity, default: 1 */
  opacity: number
  /** Outline transparency, default: false */
  transparent: boolean
  /** Outline thickness, default 0.05 */
  thickness: number
  /** Geometry crease angle (0 === no crease), default: Math.PI */
  angle: number
}

<mesh>
  <boxGeometry />
  <meshBasicMaterial />
  <Outlines thickness={0.05} color="hotpink" />
</mesh>

src/core/Outlines.tsx

Edit this page