-
-
Notifications
You must be signed in to change notification settings - Fork 116
/
MeshLineMaterial.svelte
72 lines (63 loc) · 2.06 KB
/
MeshLineMaterial.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script lang="ts">
import type {
MeshLineMaterialEvents,
MeshLineMaterialProps,
MeshLineMaterialSlots
} from './MeshLineMaterial.svelte'
import { T, useThrelte, forwardEventHandlers } from '@threlte/core'
import { ShaderMaterial, Color, Vector2 } from 'three'
import { fragmentShader } from './fragment'
import { vertexShader } from './vertex'
type $$Props = Required<MeshLineMaterialProps>
type $$Events = MeshLineMaterialEvents
type $$Slots = MeshLineMaterialSlots
export let opacity: $$Props['opacity'] = 1
export let color: $$Props['color'] = '#ffffff'
export let dashOffset: $$Props['color'] = 0
export let dashArray: $$Props['dashArray'] = 0
export let dashRatio: $$Props['dashRatio'] = 0
export let attenuate: $$Props['attenuate'] = true
export let width: $$Props['width'] = 1
export let scaleDown: $$Props['scaleDown'] = 0
export let alphaMap: $$Props['texture'] = undefined
let { invalidate, size } = useThrelte()
const uniforms = {
lineWidth: { value: width },
color: { value: new Color(color) },
opacity: { value: opacity },
resolution: { value: new Vector2(1, 1) },
sizeAttenuation: { value: attenuate ? 1 : 0 },
dashArray: { value: dashArray },
dashOffset: { value: dashOffset },
dashRatio: { value: dashRatio },
useDash: { value: dashArray > 0 ? 1 : 0 },
scaleDown: { value: scaleDown / 10 },
alphaTest: { value: 0 },
alphaMap: { value: alphaMap },
useAlphaMap: { value: alphaMap ? 1 : 0 }
}
const material = new ShaderMaterial({ uniforms })
$: {
uniforms.resolution.value.set($size.width, $size.height)
invalidate()
}
$: {
uniforms.dashRatio.value = dashRatio
uniforms.dashArray.value = dashArray
uniforms.dashOffset.value = dashOffset
uniforms.lineWidth.value = width
uniforms.opacity.value = opacity
uniforms.color.value.set(color)
invalidate()
}
const component = forwardEventHandlers()
</script>
<T
is={material}
bind:this={$component}
{...$$restProps}
{fragmentShader}
{vertexShader}
>
<slot ref={material} />
</T>