<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.

Show Code

• App.svelte
• Scene.svelte

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

<div>
  <Canvas>
    <Scene />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>

<script lang="ts">
  import { T, useTask } from '@threlte/core'
  import { Edges, useGltf } from '@threlte/extras'
  import { Color, Mesh, MeshStandardMaterial, MathUtils } from 'three'

  let rotation = $state(0)
  useTask((delta) => {
    rotation += delta
  })

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

  const helmetGeometry = $derived($gltf?.nodes['node_damagedHelmet_-6514'].geometry)
</script>

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

<T.Group rotation.y={rotation}>
  {#if helmetGeometry}
    <T.Mesh
      rotation.x={90 * MathUtils.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 { BoxGeometry, MeshBasicMaterial } from 'three'
  import { Edges } from '@threlte/extras'
  import { T } from '@threlte/core'
</script>

<T.Mesh
  geometry={new BoxGeometry()}
  material={new MeshBasicMaterial()}
>
  <Edges color="black" />
</T.Mesh>

Component Signature

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

Props

name

type

required

---

color

THREE.ColorRepresentation

no

---

thresholdAngle

number

no