src/lib/components/scene/robot/URDF/primitives/UrdfLink.svelte

<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 -->