src/lib/components/scene/Robot.svelte

<script lang="ts">
	import { T } from '@threlte/core';
	import { getRootLinks } from '$lib/components/scene/robot/URDF/utils/UrdfParser';
	import UrdfLink from '$lib/components/scene/robot/URDF/primitives/UrdfLink.svelte';
	import { robotManager } from '$lib/robot/RobotManager.svelte';

	interface Props {}

	let {}: Props = $props();

	// Get all robots from the manager
	const robots = $derived(robotManager.robots);
</script>

{#each robots as robot, index (robot.id)}
	{@const xPosition = index * 5} <!-- Space robots 5 units apart -->
	<T.Group position.x={xPosition} position.y={0} position.z={0} quaternion={[0, 0, 0, 1]} scale={[10, 10, 10]} rotation={[-Math.PI / 2, 0, 0]}>
		{#each getRootLinks(robot.robotState.robot) as link}
			<UrdfLink
				robot={robot.robotState.robot}
				{link}
				textScale={0.2}
				showName={true}
				showVisual={true}
				showCollision={false}
				visualColor="#333333"
				visualOpacity={0.7}
				collisionOpacity={0.7}
				collisionColor="#813d9c"
				jointNames={true}
				joints={true}
				jointColor="#62a0ea"
				jointIndicatorColor="#f66151"
				nameHeight={0.1}
				selectedLink={robot.robotState.selection.selectedLink}
				selectedJoint={robot.robotState.selection.selectedJoint}
				highlightColor="#ffa348"
				showLine={false}
				opacity={1}
				isInteractive={false}
			/>
		{/each}
	</T.Group>
{/each}