Threlte component that wraps TextGeometry from three.js

Text3D.svelte

<script lang="ts">
	import { T, extend, type AsyncWritable } from '@threlte/core';
	import type { Material } from 'three';
	import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
	import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
	import { useLoader } from '@threlte/core';

	extend({ TextGeometry });

	export let fontPath: string;
	export let material: Material;
	export let text: string;

	export let size: number;
	export let height: number;
	export let curveSegments: number;
	export let bevelEnabled: boolean;
	export let bevelThickness: number;
	export let bevelSize: number;
	export let bevelOffset: number;
	export let bevelSegments: number;

	export let scale: number;
	export let position: [number, number, number] = [0, 0, 0];

	let loader: AsyncWritable<any>;

	$: loader = useLoader(FontLoader).load(fontPath);
</script>

{#await loader then font}
	<T.Mesh {position} {material} {scale}>
		<T.TextGeometry
			args={[
				text,
				{
					font: font,
					size: size,
					height: height,
					curveSegments: curveSegments,
					bevelEnabled: bevelEnabled,
					bevelThickness: bevelThickness,
					bevelSize: bevelSize,
					bevelOffset: bevelOffset,
					bevelSegments: bevelSegments
				}
			]}
		/>
	</T.Mesh>
{/await}