@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.
Model: Battle Damaged Sci-fi Helmet by theblueturtle_
Example
<script lang="ts">
import { BoxBufferGeometry, MeshBasicMaterial } from 'three'
import { Mesh } from '@threlte/core'
import { Edges } from '@threlte/extras'
</script>
<Mesh geometry={new BoxBufferGeometry(1, 1, 1)} material={new MeshBasicMaterial()}>
<Edges color="black" />
</Mesh>
Properties
// optional
color: THREE.ColorRepresentation | undefined = undefined
material: THREE.Material | THREE.Material[] | undefined = undefined
threshold: number | undefined = undefined
position: Position | undefined = undefined
scale: Scale | undefined = undefined
rotation: Rotation | undefined = undefined
lookAt: LookAt | undefined = undefined
viewportAware: boolean = false
castShadow: boolean | undefined = undefined
receiveShadow: boolean | undefined = undefined
frustumCulled: boolean | undefined = undefined
renderOrder: number | undefined = undefined
visible: boolean | undefined = undefined
dispose: boolean | undefined = undefined
userData: Record<string, any> | undefined = undefined
interactive: boolean = false
ignorePointer: boolean = false
Bindings
inViewport: boolean
Events
viewportenter: undefined
viewportleave: undefined
click: CustomEvent<ThreltePointerEvent>
contextmenu: CustomEvent<ThreltePointerEvent>
pointerup: CustomEvent<ThreltePointerEvent>
pointerdown: CustomEvent<ThreltePointerEvent>
pointerenter: CustomEvent<ThreltePointerEvent>
pointerleave: CustomEvent<ThreltePointerEvent>
pointermove: CustomEvent<ThreltePointerEvent>