File size: 2,538 Bytes
3aea7c6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<script lang="ts">
	// The link element describes a rigid body with an inertia, visual features, and collision properties.
	import type IUrdfLink from '../interfaces/IUrdfLink';
	import UrdfVisual from './UrdfVisual.svelte';
	import { getChildJoints } from '../utils/UrdfParser';
	import UrdfJoint from './UrdfJoint.svelte';
	import { Billboard, Text } from '@threlte/extras';
	import type IUrdfRobot from '../interfaces/IUrdfRobot';
	import type IUrdfJoint from '../interfaces/IUrdfJoint';

	interface Props {
		robot: IUrdfRobot;
		link: IUrdfLink;
		textScale?: number;
		showName?: boolean;
		showVisual?: boolean;
		showCollision?: boolean;
		visualColor?: string;
		visualOpacity?: number;
		collisionOpacity?: number;
		collisionColor?: string;
		jointNames?: boolean;
		joints?: boolean;
		jointColor?: string;
		jointIndicatorColor?: string;
		nameHeight?: number;
		selectedLink?: IUrdfLink;
		selectedJoint?: IUrdfJoint;
		highlightColor?: string;
		showLine?: boolean;
		opacity?: number;
		isInteractive?: boolean;
	}

	let {
		robot,
		link,
		textScale = 1,
		showName = true,
		showVisual = true,
		showCollision = true,
		visualColor = '#000000',
		visualOpacity = 1,
		collisionOpacity = 1,
		collisionColor = '#000000',
		jointNames = true,
		joints = true,
		jointColor = '#000000',
		jointIndicatorColor = '#000000',
		nameHeight = 0.1,
		selectedLink = undefined,
		selectedJoint = undefined,
		highlightColor = '#000000',
		showLine = true,
		opacity = 0.7,
		isInteractive = false
	}: Props = $props();
</script>

{@html `<!-- Link ${link.name} -->`}
{#if showName}
	<!-- <Billboard position.x={0} position.y={0} position.z={0}>
		<Text anchorY={-0.2} scale={textScale} text={link.name} characters="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
		></Text>
	</Billboard> -->
{/if}

{#if showVisual}
	{#each link.visual as visual}
		<UrdfVisual
			opacity={visualOpacity}
			{visual}
			defaultColor={visualColor}
		/>
	{/each}
{/if}

{#if showCollision}
	{#each link.collision as visual}
		<UrdfVisual
			opacity={collisionOpacity}
			visual={visual}
			defaultColor={collisionColor}
		/>
	{/each}
{/if}

{#each getChildJoints(robot, link) as joint}
	<UrdfJoint
		{robot}
		joint={joint}
		{selectedJoint}
		{selectedLink}
		{showName}
		{nameHeight}
		{highlightColor}
		{jointColor}
		{jointIndicatorColor}
		{showLine}
		{opacity}
		{isInteractive}
		{showVisual}
		{showCollision}
		{visualOpacity}
		{collisionOpacity}
		{collisionColor}
		{jointNames}
		{joints}
	/>
{/each}

<!-- From https://github.com/brean/urdf-viewer -->