<FakeGlowMaterial>

This component is a port of ektogamat’s <FakeGlowMaterial> r3f component which displays a glowing outline around a mesh using a custom shader, instead of post-processing.

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 } from '@threlte/core'
3
  import { OrbitControls, Grid, FakeGlowMaterial } from '@threlte/extras'
4
</script>
5

6
<T.Group
7
  position.y={2}
8
  position.x={-3}
9
>
10
  <T.Mesh>
11
    <T.MeshBasicMaterial color="green" />
12
    <T.IcosahedronGeometry args={[2, 4]} />
13
  </T.Mesh>
14

15
  <T.Mesh>
16
    <FakeGlowMaterial />
17
    <T.IcosahedronGeometry args={[4, 4]} />
18
  </T.Mesh>
19
</T.Group>
20

21
<T.Group
22
  position.y={3}
23
  position.x={3}
24
>
25
  <T.Mesh>
26
    <T.MeshBasicMaterial color="blue" />
27
    <T.BoxGeometry args={[2, 2, 2]} />
28
  </T.Mesh>
29

30
  <T.Mesh>
31
    <FakeGlowMaterial glowColor="blue" />
32
    <T.IcosahedronGeometry args={[3, 4]} />
33
  </T.Mesh>
34
</T.Group>
35

36
<T.Group
37
  position.y={6}
38
  position.x={0}
39
>
40
  <T.Mesh>
41
    <T.MeshBasicMaterial color="red" />
42
    <T.TorusKnotGeometry args={[1, 0.25, 128]} />
43
  </T.Mesh>
44

45
  <T.Mesh>
46
    <FakeGlowMaterial glowColor="red" />
47
    <T.TorusKnotGeometry args={[1, 0.8, 128]} />
48
  </T.Mesh>
49
</T.Group>
50

51
<T.PerspectiveCamera
52
  makeDefault
53
  position.y={8}
54
  position.z={8}
55
  fov={90}
56
>
57
  <OrbitControls
58
    enableDamping
59
    enablePan={false}
60
    enableZoom={false}
61
  />
62
</T.PerspectiveCamera>
63

64
<Grid
65
  position.y={0}
66
  sectionThickness={1}
67
  infiniteGrid
68
  cellColor="#dddddd"
69
  sectionColor="#ffffff"
70
  sectionSize={10}
71
  cellSize={2}
72
/>

Examples

Basic Example

1
<script lang="ts">
2
  import { T } from '@threlte/core'
3
  import { FakeGlowMaterial } from '@threlte/extras'
4
</script>
5

6
<T.Mesh>
7
  <FakeGlowMaterial glowColor="red" />
8
  <T.IcosahedronGeometry args={[4, 4]} />
9
</T.Mesh>

This effect is mesh based, meaning you need to provide a mesh for this to work properly. The mesh must also be smooth enough that glsl can calculate the normals properly.

For sharp meshes like a cube, you can use a sphere to simulate the glow, instead of a copy of the cube.

1
<script lang="ts">
2
  import { T } from '@threlte/core'
3
  import { FakeGlowMaterial } from '@threlte/extras'
4
</script>
5

6
<T.Mesh>
7
  <FakeGlowMaterial glowColor="blue" />
8
  <T.BoxGeometry args={[2, 2, 2]} />
9
</T.Mesh>
10

11
<T.Mesh>
12
  <FakeGlowMaterial glowColor="blue" />
13
  <T.IcosahedronGeometry args={[3, 4]} />
14
</T.Mesh>

Component Signature

<FakeGlowMaterial> extends < T . ShaderMaterial > and supports all its props, snippets, bindings and events.

Props

name

type

required

default

description

falloff

number

0.1

Controls the value of the Falloff effect. Ranges from 0.0 to 1.0.

glowColor

ColorRepresentation

"green"

glowInternalRadius

number

6.0

Controls the internal glow radius. Ranges from -1.0 to 1.0. Set a darker color to get the fresnel effect only.

glowSharpness

number

1.0