src/lib/components/scene/robot/URDF/mesh/STL.svelte

<script lang="ts">
	import { T, useLoader } from '@threlte/core';
	import type { InteractivityProps } from '@threlte/extras';
	import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
	import { type Side, DoubleSide } from 'three';
	import { interactivity } from '@threlte/extras';

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

	let {
		filename,
		color = '#ffffff',
		scale = [1, 1, 1],
		position = [0, 0, 0],
		rotation = [0, 0, 0],
		opacity = 1.0,
		castShadow = true,
		receiveShadow = true,
		isInteractive = false,
		wireframe = false,
		side = DoubleSide,
		...restProps
	}: Props = $props();

	if (isInteractive) {
		interactivity();
	}

	const { load } = useLoader(STLLoader);
</script>

{#await load(filename) then stl}
	{@html `<!-- include stl: ${filename} ${scale} -->`}
	<T.Mesh geometry={stl} {scale} {castShadow} {receiveShadow} {position} {rotation} {...restProps}>
		<T.MeshLambertMaterial color={color} {opacity} transparent={opacity < 1.0} {wireframe} {side} />
	</T.Mesh>
{/await}

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