src/lib/components/3d/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 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} defaultColor={collisionColor} />
	{/each}
{/if}

{#each getChildJoints(robot, link) as joint (joint.name)}
	<UrdfJoint
		{robot}
		{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 -->