Added support to render Threlte components from gltf files.

[grischaerbe]

First of all thanks for cracking the tough nuts on this great tool.

This PR brings support for rendering Threlte components instead of JSX with the flag --threlte.

Since Threlte now also supports rendering instead of wrapping components, a lot of the tools code can be used to render Threlte components instead of JSX.

It currently supports:

• Animations (using the useGltfAnimations hook)
• TypeScript

It does not support Instancing at the moment. Since Threlte render components are still quite new, we're in the process of transitioning that part to our new component syntax.

I separated the functions where needed to either print JSX or Threlte so there are as little as possible control flows. While at it, I updated prettier. To format Svelte components with prettier, Svelte must be installed alongside prettier-plugin-svelte.

Example

Comparison between JSX output and Threlte output for a skinned mesh with animations and TypeScript types:

JSX

```jsx /* Auto-generated by: https://github.com/pmndrs/gltfjsx Command: npx gltfjsx@6.1.3 ./stacy.glb -t */ import * as THREE from 'three' import React, { useRef } from 'react' import { useGLTF, useAnimations } from '@react-three/drei' import { GLTF } from 'three-stdlib' type GLTFResult = GLTF & { nodes: { stacy: THREE.SkinnedMesh mixamorigHips: THREE.Bone } materials: {} } type ActionName = 'pockets' | 'rope' | 'swingdance' | 'jump' | 'react' | 'shrug' | 'wave' | 'golf' | 'idle' type GLTFActions = Record export function Model(props: JSX.IntrinsicElements['group']) { const group = useRef() const { nodes, materials, animations } = useGLTF('/stacy.glb') as GLTFResult const { actions } = useAnimations(animations, group) return ( ) } useGLTF.preload('/stacy.glb') ```

Threlte

```html {#if $gltf} {/if} ```

When you're fine with merging it, I'll extend the docs with a little paragraph about Threlte support.

[drcmda]

i don't know what to think of it tbh. adding svelte as a dependency would not be clean given that gltfjsx is also being used as a package. also doubles up a lot of code, which will increase maintenance. and if contributors plain ignore the svelte part, which they will, half of the code is then left outdated and lagging behind.

the current approach that gltfjsx takes is not so extensible since everything is plain concatenated text. i wish this were an AST transform or something like that.

but i would suggest to fork it into its own tool. i guess even just being able to lay out models declaratively is already unifying the eco system, in principle at least.

[grischaerbe]

I agree that it's more to maintain on your side and that it's maybe not in the interest of your contributors to keep it up to date. For anyone interested, a fork is now part of the Threlte ecosystem and available as npx @threlte/gltf Model.glb (readme). Nevertheless thanks so much for your work on this tool, I will close this PR.