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

<script lang="ts">
	import type { IUrdfVisual } from '../interfaces/IUrdfVisual';
	import { numberArrayToColor } from '../utils/helper';
	import DAE from '../mesh/DAE.svelte';
	import OBJ from '../mesh/OBJ.svelte';
	import STL from '../mesh/STL.svelte';
	import { T } from '@threlte/core';
	import { interactivity, type InteractivityProps } from '@threlte/extras';
	import type IUrdfLink from '../interfaces/IUrdfLink';
	import { DoubleSide, type Side } from 'three';

	type Props = InteractivityProps & {
		visual: IUrdfVisual;
		defaultColor?: string;
		position?: [number, number, number];
		rotation?: [number, number, number];
		castShadow?: boolean;
		receiveShadow?: boolean;
		opacity?: number;
		isInteractive?: boolean;
		wireframe?: boolean;
		side?: Side;
	};

	let {
		visual,
		opacity = 1.0,
		defaultColor = '#000000',
		position = [0, 0, 0],
		rotation = [0, 0, 0],
		castShadow = true,
		receiveShadow = true,
		isInteractive = false,
		wireframe = false,
		side = DoubleSide,
		...restProps
	}: Props = $props();

	const color = visual?.color_rgba
		? numberArrayToColor(visual.color_rgba.slice(0, 3) as [number, number, number])
		: defaultColor;
		
</script>

{#if visual.type === 'mesh'}
	{#if visual.geometry.type === 'stl'}
		<STL
			{color}
			{opacity}
			filename={visual.geometry.filename}
			scale={visual.geometry.scale}
			{position}
			{rotation}
			{castShadow}
			{receiveShadow}
			{wireframe}
			{side}
			{...restProps}
		/>
	{:else if visual.geometry.type === 'obj'}
		<OBJ
			{color}
			{opacity}
			scale={visual.geometry.scale}
			filename={visual.geometry.filename}
			{position}
			{rotation}
			{castShadow}
			{receiveShadow}
			{wireframe}
			{side}
			{...restProps}
		/>
	{:else if visual.geometry.type === 'dae'}
		<DAE
			filename={visual.geometry.filename}
			{color}
			{opacity}
			scale={visual.geometry.scale}
			{position}
			{rotation}
			{castShadow}
			{receiveShadow}
			{wireframe}
			{side}
			{...restProps}
		/>
	{/if}
{:else if visual.type === 'cylinder'}
	<T.Mesh castShadow receiveShadow rotation={[Math.PI / 2, 0, 0]} {onclick}>
		<T.CylinderGeometry
			args={[visual.geometry.radius, visual.geometry.radius, visual.geometry.length]}
		/>
		<T.MeshBasicMaterial
			{color}
			opacity={opacity < 1.0 ? opacity : undefined}
			transparent={opacity < 1.0}
		/>
	</T.Mesh>
{:else if visual.type === 'box'}
	<T.Mesh castShadow receiveShadow scale={visual.geometry.size} {onclick}>
		<T.BoxGeometry />
		<T.MeshBasicMaterial
			{color}
			opacity={opacity < 1.0 ? opacity : undefined}
			transparent={opacity < 1.0}
		/>
	</T.Mesh>
{/if}