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

<script lang="ts">
	import type IUrdfJoint from '../interfaces/IUrdfJoint';
	import { T } from '@threlte/core';
	import UrdfLink from './UrdfLink.svelte';
	import { Vector3 } from 'three';
	import {
		Billboard,
		interactivity,
		MeshLineGeometry,
		Text,
		type InteractivityProps
	} from '@threlte/extras';
	import Selectable from '../../../Selectable.svelte';

	import type IUrdfLink from '../interfaces/IUrdfLink';
	import type IUrdfRobot from '../interfaces/IUrdfRobot';

	const defaultOnClick: InteractivityProps['onclick'] = (event) => {
		event.stopPropagation();
		selectedLink = undefined;
		selectedJoint = joint;
	};

	type Props = InteractivityProps & {
		robot: IUrdfRobot;
		joint: IUrdfJoint;
		selectedJoint?: IUrdfJoint;
		selectedLink?: IUrdfLink;
		showName?: boolean;
		nameHeight?: number;
		highlightColor?: string;
		jointColor?: string;
		jointIndicatorColor?: string;
		showLine?: boolean;
		opacity?: number;
		isInteractive?: boolean;
		showVisual?: boolean;
		showCollision?: boolean;
		visualOpacity?: number;
		collisionOpacity?: number;
		collisionColor?: string;
		jointNames?: boolean;
		joints?: boolean;
	};

	let {
		robot,
		joint,
		selectedJoint = $bindable(),
		selectedLink = $bindable(),
		showLine = false,
		nameHeight = 0.02,
		highlightColor = '#ff0000',
		jointColor = '#000000',
		jointIndicatorColor = '#000000',
		opacity = 0.7,
		isInteractive = false,
		showName = false,
		showVisual = true,
		showCollision = true,
		visualOpacity = 1,
		collisionOpacity = 1,
		collisionColor = '#000000',
		jointNames = true,
		onclick = defaultOnClick,
		...restProps
	}: Props = $props();

	if (isInteractive) {
		interactivity();
	}
</script>

{@html `<!-- Joint ${joint.name} (${joint.type}) -->`}
{#if showName}
	<Billboard
		position.x={joint.origin_xyz[0]}
		position.y={joint.origin_xyz[1]}
		position.z={joint.origin_xyz[2]}
	>
		<Text
			scale={nameHeight}
			color={selectedJoint == joint ? highlightColor : jointColor}
			text={joint.name}
			characters="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
		></Text>
	</Billboard>
{/if}

<!-- draw line from parent-frame to joint origin -->
{#if showLine}
	<T.Line>
		<MeshLineGeometry
			points={[
				new Vector3(0, 0, 0),
				new Vector3(joint.origin_xyz[0], joint.origin_xyz[1], joint.origin_xyz[2])
			]}
		/>
		<T.LineBasicMaterial color={jointColor} />
	</T.Line>
{/if}

<Selectable origin={joint} selected={selectedJoint == joint}>
	<T.Group rotation={joint.rotation || [0, 0, 0]}>
		{#if joint.child}
			<UrdfLink
				{robot}
				link={joint.child}
				textScale={0.02}
				{showName}
				{showVisual}
				{showCollision}
				{visualOpacity}
				{collisionOpacity}
				{collisionColor}
				jointNames={true}
				joints={true}
				{jointColor}
				{jointIndicatorColor}
				{nameHeight}
				{selectedLink}
				{selectedJoint}
				{highlightColor}
				showLine={true}
				opacity={1}
				isInteractive={true}
			/>
		{/if}

		{#if showLine}
			<T.Line>
				<MeshLineGeometry points={[new Vector3(0, 0, 0), new Vector3(0, -0.02, 0)]} />
				<T.LineBasicMaterial color={jointIndicatorColor} />
			</T.Line>

			<T.Mesh rotation={[Math.PI / 2, 0, 0]} {...restProps}>
				<T.CylinderGeometry args={[0.004, 0.004, 0.03]} />
				<T.MeshBasicMaterial
					color={selectedJoint == joint ? highlightColor : jointColor}
					{opacity}
					transparent={opacity < 1.0}
				/>
			</T.Mesh>
		{/if}
	</T.Group>
</Selectable>

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