threlte logo
@threlte/extras

<Edges>

Abstracts THREE.EdgesGeometry. This component automatically pulls the geometry from its parent.

Edges are displayed when the angle between two faces exceeds the angle defined by the property threshold.

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
</script>

<Canvas>
  <Scene />
</Canvas>
<script lang="ts">
  import { T, useFrame } from '@threlte/core'
  import { Edges, useGltf } from '@threlte/extras'
  import { BufferGeometry, Color, Mesh, MeshStandardMaterial } from 'three'
  import { DEG2RAD } from 'three/src/math/MathUtils'

  let rotation = 0
  useFrame(() => {
    rotation += 0.01
  })

  const gltf = useGltf<{
    nodes: {
      'node_damagedHelmet_-6514': Mesh
    }
    materials: {
      Material_MR: MeshStandardMaterial
    }
  }>('/models/helmet/DamagedHelmet.gltf')

  let helmetGeometry: BufferGeometry | undefined
  $: if ($gltf) {
    const mesh = $gltf.nodes['node_damagedHelmet_-6514'] as Mesh
    helmetGeometry = mesh.geometry
  }
</script>

<T.PerspectiveCamera
  makeDefault
  position.z={10}
  fov={20}
/>

<T.Group rotation.y={rotation}>
  {#if helmetGeometry}
    <T.Mesh
      rotation.x={90 * DEG2RAD}
      geometry={helmetGeometry}
    >
      <T.MeshBasicMaterial
        color={new Color(0xff3e00)}
        toneMapped={false}
      />
      <Edges
        thresholdAngle={20}
        color="white"
        scale={1.01}
      />
    </T.Mesh>
  {/if}
</T.Group>

Model: Battle Damaged Sci-fi Helmet by theblueturtle_

Example

<script lang="ts">
  import { BoxBufferGeometry, MeshBasicMaterial } from 'three'
  import { Mesh } from '@threlte/core'
  import { Edges } from '@threlte/extras'
</script>

<Mesh
  geometry={new BoxBufferGeometry(1, 1, 1)}
  material={new MeshBasicMaterial()}
>
  <Edges color="black" />
</Mesh>

Component Signature

<Edges> extends <T.LineSegments> and supports all its props, slot props, bindings and events.

Props

name
type
required

color
THREE.ColorRepresentation
no

thresholdAngle
number
no