<Outlines>

A port of the drei <Outlines> component.

An ornamental component that extracts the geometry from its parent and displays an inverted-hull outline. Supported parents are Mesh, SkinnedMesh and InstancedMesh.

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

6
<div>
7
  <Canvas>
8
    <Scene />
9
  </Canvas>
10
</div>
11

12
<style>
13
  div {
14
    height: 100%;
15
  }
16
</style>

1
<script lang="ts">
2
  import { T, useTask } from '@threlte/core'
3
  import { Edges, Outlines, useDraco, useGltf } from '@threlte/extras'
4
  import { Mesh, MeshStandardMaterial, MathUtils } from 'three'
5

6
  let rotation = $state(0)
7
  useTask((delta) => {
8
    rotation += delta
9
  })
10

11
  const helmetGltf = useGltf<{
12
    nodes: {
13
      'node_damagedHelmet_-6514': Mesh
14
    }
15
    materials: {
16
      Material_MR: MeshStandardMaterial
17
    }
18
  }>('/models/helmet/DamagedHelmet.gltf')
19

20
  const helmetGeometry = $derived($helmetGltf?.nodes['node_damagedHelmet_-6514'].geometry)
21

22
  const dracoLoader = useDraco()
23
  const suziGltf = useGltf<{
24
    nodes: {
25
      Suzanne: Mesh
26
    }
27
    materials: {
28
      Material_MR: MeshStandardMaterial
29
    }
30
  }>(
31
    'https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/suzanne-high-poly/model.gltf',
32
    { dracoLoader }
33
  )
34
</script>
35

36
<T.PerspectiveCamera
37
  makeDefault
38
  position.z={30}
39
  fov={20}
40
/>
41

42
<T.DirectionalLight position={[5, 5, 5]} />
43

44
<T.Group
45
  rotation.y={rotation}
46
  position.x={-3}
47
>
48
  <T.Mesh>
49
    <T.TorusKnotGeometry args={[0.5, 0.15, 128, 64]} />
50
    <T.MeshToonMaterial color="#ff3e00" />
51
    <Outlines color="white" />
52
    <Outlines
53
      color="hotpink"
54
      thickness={0.05}
55
    />
56
    <Outlines
57
      color="yellow"
58
      thickness={0.1}
59
    />
60
  </T.Mesh>
61
</T.Group>
62

63
<T.Group rotation.y={rotation}>
64
  {#if helmetGeometry}
65
    <T.Mesh
66
      rotation.x={90 * MathUtils.DEG2RAD}
67
      geometry={helmetGeometry}
68
    >
69
      <T.MeshBasicMaterial
70
        color="#ff3e00"
71
        toneMapped={false}
72
      />
73
      <Edges
74
        thresholdAngle={20}
75
        color="white"
76
        scale={1.01}
77
      />
78
      <Outlines
79
        color="white"
80
        thickness={0.02}
81
      />
82
    </T.Mesh>
83
  {/if}
84
</T.Group>
85

86
{#if $suziGltf}
87
  <T.Group
88
    rotation.y={rotation}
89
    position.x={3}
90
    position.y={-1}
91
  >
92
    <T.Mesh
93
      geometry={$suziGltf.nodes['Suzanne'].geometry}
94
      scale={1.2}
95
    >
96
      <T.MeshStandardMaterial color="turquoise" />
97
      <Outlines
98
        color="white"
99
        screenspace
100
        thickness={2}
101
        angle={0.001}
102
      />
103
    </T.Mesh>
104
  </T.Group>
105
{/if}

Model: Battle Damaged Sci-fi Helmet by theblueturtle_

Example

1
<script lang="ts">
2
  import { BoxGeometry, MeshBasicMaterial } from 'three'
3
  import { T } from '@threlte/core'
4
  import { Outlines } from '@threlte/extras'
5
</script>
6

7
<T.Mesh
8
  geometry={new BoxGeometry()}
9
  material={new MeshBasicMaterial()}
10
>
11
  <Outlines color="black" />
12
</T.Mesh>

Component Signature

Props

name

type

required

default

description

angle

number

Math.PI

color

THREE.ColorRepresentation

black

Outline color

opacity

boolean

1

Outline transparency

polygonOffset

boolean

false

polygonOffsetFactor

number

0

renderOrder

number

0

screenspace

boolean

false

Line thickness is independent of zoom

thickness

number

0.05

Outline thickness

toneMapped

boolean

true