@threlte/extras
<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.
<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 } from '@threlte/core'
import { OrbitControls, Grid, FakeGlowMaterial } from '@threlte/extras'
</script>
<T.Group
position.y={2}
position.x={-3}
>
<T.Mesh>
<T.MeshBasicMaterial color="green" />
<T.IcosahedronGeometry args={[2, 4]} />
</T.Mesh>
<T.Mesh>
<FakeGlowMaterial />
<T.IcosahedronGeometry args={[4, 4]} />
</T.Mesh>
</T.Group>
<T.Group
position.y={3}
position.x={3}
>
<T.Mesh>
<T.MeshBasicMaterial color="blue" />
<T.BoxGeometry args={[2, 2, 2]} />
</T.Mesh>
<T.Mesh>
<FakeGlowMaterial glowColor="blue" />
<T.IcosahedronGeometry args={[3, 4]} />
</T.Mesh>
</T.Group>
<T.Group
position.y={6}
position.x={0}
>
<T.Mesh>
<T.MeshBasicMaterial color="red" />
<T.TorusKnotGeometry args={[1, 0.25, 128]} />
</T.Mesh>
<T.Mesh>
<FakeGlowMaterial glowColor="red" />
<T.TorusKnotGeometry args={[1, 0.8, 128]} />
</T.Mesh>
</T.Group>
<T.PerspectiveCamera
makeDefault
position.y={8}
position.z={8}
fov={90}
on:create={({ ref }) => {
ref.lookAt(0, 0, 0)
}}
>
<OrbitControls
enableDamping
enablePan={false}
enableZoom={false}
/>
</T.PerspectiveCamera>
<Grid
position.y={0}
sectionThickness={1}
infiniteGrid
cellColor="#dddddd"
sectionColor="#ffffff"
sectionSize={10}
cellSize={2}
/>Examples
Basic Example
FakeGlowMaterial.svelte
<script lang="ts">
import { T } from '@threlte/core'
import { FakeGlowMaterial } from '@threlte/extras'
</script>
<T.Mesh>
<FakeGlowMaterial glowColor="red"/>
<T.IcosahedronGeometry args={[4, 4]} />
</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.
FakeGlowMaterialCube.svelte
<script lang="ts">
import { T } from '@threlte/core'
import { FakeGlowMaterial } from '@threlte/extras'
</script>
<T.Mesh>
<FakeGlowMaterial glowColor="blue"/>
<T.BoxGeometry args={[2, 2, 2]} />
</T.Mesh>
<T.Mesh>
<FakeGlowMaterial glowColor="blue"/>
<T.IcosahedronGeometry args={[3, 4]} />
</T.Mesh>Component Signature
<FakeGlowMaterial> extends
<T.ShaderMaterial>
and supports all its props, slot props, bindings and events.