@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>
<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 { BufferGeometry, Color, Mesh, MeshStandardMaterial } from 'three'
import { DEG2RAD } from 'three/src/math/MathUtils.js'
let rotation = 0
useTask((delta) => {
rotation += delta
})
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 { T } from '@threlte/core'
import { Edges } from '@threlte/extras'
</script>
<T.Mesh
geometry={new BoxBufferGeometry(1, 1, 1)}
material={new MeshBasicMaterial()}
>
<Edges color="black" />
</T.Mesh>Component Signature
<Edges> extends
<T.LineSegments>
and supports all its props, slot props, bindings and events.