src/lib/components/3d/robot/URDF/mesh/OBJ.svelte

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

	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],
		rotation = [0, 0, 0],
		position = [0, 0, 0],
		opacity = 1.0,
		castShadow = true,
		receiveShadow = true,
		isInteractive = false,
		wireframe = false,
		side = DoubleSide,
		...restProps
	}: Props = $props();

	const { load } = useLoader(OBJLoader);

	// let obj = $state<undefined | Group>();

	// const objLoader = new OBJLoader();
	// objLoader.load(filename, (data: Group) => {
	// 	obj = data;
	// });
</script>

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

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