Merge pull request #63 from polijn/main

3d file viewer with support for stl, gab, fbx

package.json

···
 		"@atcute/tid": "^1.1.1",
 		"@cloudflare/workers-types": "^4.20260123.0",
 		"@ethercorps/sveltekit-og": "^4.2.1",
+		"@foxui/3d": "^0.4.7",
 		"@foxui/colors": "^0.4.7",
 		"@foxui/core": "^0.4.7",
 		"@foxui/social": "^0.4.7",
···
 		"@foxui/visual": "^0.4.7",
 		"@number-flow/svelte": "^0.3.10",
 		"@tailwindcss/typography": "^0.5.19",
+		"@threlte/core": "^8.3.1",
+		"@threlte/extras": "^9.7.1",
 		"@tiptap/core": "^3.16.0",
 		"@tiptap/extension-document": "^3.16.0",
 		"@tiptap/extension-image": "^3.16.0",
···
 		"@tiptap/extension-placeholder": "^3.16.0",
 		"@tiptap/extension-text": "^3.16.0",
 		"@tiptap/starter-kit": "^3.16.0",
+		"@types/three": "^0.176.0",
 		"bits-ui": "^2.15.4",
 		"clsx": "^2.1.1",
 		"gsap": "^3.14.2",
···
 		"svelte-sonner": "^1.0.7",
 		"tailwind-merge": "^3.4.0",
 		"tailwind-variants": "^3.2.2",
+		"three": "^0.176.0",
 		"turndown": "^7.2.2",
 		"wrangler": "^4.60.0"
 	},

pnpm-lock.yaml

···
       '@ethercorps/sveltekit-og':
         specifier: ^4.2.1
         version: 4.2.1(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.48.0)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))
+      '@foxui/3d':
+        specifier: ^0.4.7
+        version: 0.4.7(svelte@5.48.0)(tailwindcss@4.1.18)
       '@foxui/colors':
         specifier: ^0.4.7
         version: 0.4.7(svelte@5.48.0)(tailwindcss@4.1.18)
···
       '@tailwindcss/typography':
         specifier: ^0.5.19
         version: 0.5.19(tailwindcss@4.1.18)
+      '@threlte/core':
+        specifier: ^8.3.1
+        version: 8.3.1(svelte@5.48.0)(three@0.176.0)
+      '@threlte/extras':
+        specifier: ^9.7.1
+        version: 9.7.1(@types/three@0.176.0)(svelte@5.48.0)(three@0.176.0)
       '@tiptap/core':
         specifier: ^3.16.0
         version: 3.16.0(@tiptap/pm@3.16.0)
···
       '@tiptap/starter-kit':
         specifier: ^3.16.0
         version: 3.16.0
+      '@types/three':
+        specifier: ^0.176.0
+        version: 0.176.0
       bits-ui:
         specifier: ^2.15.4
         version: 2.15.4(@internationalized/date@3.10.1)(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.48.0)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)
···
       tailwind-variants:
         specifier: ^3.2.2
         version: 3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18)
+      three:
+        specifier: ^0.176.0
+        version: 0.176.0
       turndown:
         specifier: ^7.2.2
         version: 7.2.2
···
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
 
+  '@dimforge/rapier3d-compat@0.12.0':
+    resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==}
+
   '@emnapi/runtime@1.8.1':
     resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
 
···
 
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@foxui/3d@0.4.7':
+    resolution: {integrity: sha512-6aFWbdvMPbVqvRlr1gc438RoWE/1+B7/dB1b682tl+K1ycMhWkgMzicckxafLY2A1haOv8bgAArZJ+Lt63RMNg==}
+    peerDependencies:
+      svelte: '>=5'
+      tailwindcss: '>=3'
 
   '@foxui/colors@0.4.7':
     resolution: {integrity: sha512-P40GBuwerikysWctVL1KSUrjxzlAf5j1jZ0z6+pzkWdfTv8wGxXlJcvJCkA1MkTeatLkyBrHLrIF17u2iRrMkw==}
···
   '@texel/color@1.1.11':
     resolution: {integrity: sha512-/3kKgfBqzrRfLl4RsEccx+Yfj1kVL6Bh6DejVWZ+DPg/jJdcfdYZ5fpD1nXFwWd8OQNATjz+WqsfQfUynSsgRg==}
 
+  '@threejs-kit/instanced-sprite-mesh@2.5.1':
+    resolution: {integrity: sha512-pmt1ALRhbHhCJQTj2FuthH6PeLIeaM4hOuS2JO3kWSwlnvx/9xuUkjFR3JOi/myMqsH7pSsLIROSaBxDfttjeA==}
+    peerDependencies:
+      three: '>=0.170.0'
+
+  '@threlte/core@8.3.1':
+    resolution: {integrity: sha512-qKjjNCQ+40hyeBcfOMh/8ef5x/j5PG5Wmo/L9Ye0aDCcdD6fCewWxfp7tV/J3CxPzX1dEp1JGK7sjyc7ntZSrg==}
+    peerDependencies:
+      svelte: '>=5'
+      three: '>=0.160'
+
+  '@threlte/extras@9.7.1':
+    resolution: {integrity: sha512-SGm59HDCdHxADFHuweHfFDknwubkCPodyK0pbfsVtOWWOX26gE2xfK7aKolh6YFDiPAjWjGxN0jIgkNbbr1ohg==}
+    peerDependencies:
+      svelte: '>=5'
+      three: '>=0.160'
+
   '@tiptap/core@3.16.0':
     resolution: {integrity: sha512-XegRaNuoQ/guzBQU2xHxOwFXXrtoXW9tiyXDhssSqylvZmBVSlRIPNHA6ArkHBKm6ehLf6+6Y9fF3uky1yCXYQ==}
     peerDependencies:
···
   '@tiptap/starter-kit@3.16.0':
     resolution: {integrity: sha512-eWi+77SgKyhSx91Hmn32ER+gPN6FfInGtod4A+XxSG+LqS/sn6kpUEdowYrnqiZzhUXZCSTSJvC+UcMUZHOkxQ==}
 
+  '@tweenjs/tween.js@23.1.3':
+    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
+
   '@types/bun@1.3.6':
     resolution: {integrity: sha512-uWCv6FO/8LcpREhenN1d1b6fcspAB+cefwD7uti8C8VffIv0Um08TKMn98FynpTiU38+y2dUO55T11NgDt8VAA==}
 
···
   '@types/pbf@3.0.5':
     resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==}
 
+  '@types/stats.js@0.17.4':
+    resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==}
+
   '@types/supercluster@7.1.3':
     resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==}
 
+  '@types/three@0.176.0':
+    resolution: {integrity: sha512-FwfPXxCqOtP7EdYMagCFePNKoG1AGBDUEVKtluv2BTVRpSt7b+X27xNsirPCTCqY1pGYsPUzaM3jgWP7dXSxlw==}
+
   '@types/turndown@5.0.6':
     resolution: {integrity: sha512-ru00MoyeeouE5BX4gRL+6m/BsDfbRayOskWqUvh7CLGW+UXxHQItqALa38kKnOiZPqJrtzJUgAC2+F0rL1S4Pg==}
+
+  '@types/webxr@0.5.24':
+    resolution: {integrity: sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==}
 
   '@typescript-eslint/eslint-plugin@8.53.1':
     resolution: {integrity: sha512-cFYYFZ+oQFi6hUnBTbLRXfTJiaQtYE3t4O692agbBl+2Zy+eqSKWtPjhPXJu1G7j4RLjKgeJPDdq3EqOwmX5Ag==}
···
   '@use-gesture/vanilla@10.3.1':
     resolution: {integrity: sha512-lT4scGLu59ovA3zmtUonukAGcA0AdOOh+iwNDS05Bsu7Lq9aZToDHhI6D8Q2qvsVraovtsLLYwPrWdG/noMAKw==}
 
+  '@webgpu/types@0.1.69':
+    resolution: {integrity: sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
···
     resolution: {integrity: sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==}
     engines: {node: '>= 0.4'}
 
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
   bits-ui@1.8.0:
     resolution: {integrity: sha512-CXD6Orp7l8QevNDcRPLXc/b8iMVgxDWT2LyTwsdLzJKh9CxesOmPuNePSPqAxKoT59FIdU4aFPS1k7eBdbaCxg==}
     engines: {node: '>=18', pnpm: '>=8.7.0'}
···
 
   camelize@1.0.1:
     resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
+
+  camera-controls@3.1.2:
+    resolution: {integrity: sha512-xkxfpG2ECZ6Ww5/9+kf4mfg1VEYAoe9aDSY+IwF0UEs7qEzwy0aVRfs2grImIECs/PoBtWFrh7RXsQkwG922JA==}
+    engines: {node: '>=22.0.0', npm: '>=10.5.1'}
+    peerDependencies:
+      three: '>=0.126.1'
 
   canvas-confetti@1.9.4:
     resolution: {integrity: sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==}
···
   devalue@5.6.2:
     resolution: {integrity: sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==}
 
+  diet-sprite@0.0.1:
+    resolution: {integrity: sha512-zSHI2WDAn1wJqJYxcmjWfJv3Iw8oL9reQIbEyx2x2/EZ4/qmUTIo8/5qOCurnAcq61EwtJJaZ0XTy2NRYqpB5A==}
+
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
···
 
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
+  earcut@2.2.4:
+    resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
 
   earcut@3.0.2:
     resolution: {integrity: sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==}
···
 
   fflate@0.7.4:
     resolution: {integrity: sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==}
+
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
 
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
···
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
+  maath@0.10.8:
+    resolution: {integrity: sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==}
+    peerDependencies:
+      '@types/three': '>=0.134.0'
+      three: '>=0.134.0'
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
···
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
+  meshoptimizer@0.18.1:
+    resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
+
   mini-svg-data-uri@1.4.4:
     resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
     hasBin: true
···
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
+
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
   mlly@1.8.0:
     resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
···
     resolution: {integrity: sha512-RSYAtP31mvYLkAHrOlh25pCNQ5hWnT106VukGaaFfuJrZFkGRX5GhUAdPqpSDXxOhA2c4akmRuplv1mRqnBn6Q==}
     engines: {node: '>=8'}
 
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
···
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
+  three-instanced-uniforms-mesh@0.52.4:
+    resolution: {integrity: sha512-YwDBy05hfKZQtU+Rp0KyDf9yH4GxfhxMbVt9OYruxdgLfPwmDG5oAbGoW0DrKtKZSM3BfFcCiejiOHCjFBTeng==}
+    peerDependencies:
+      three: '>=0.125.0'
+
+  three-mesh-bvh@0.9.7:
+    resolution: {integrity: sha512-EYSJbykeAjhVxwZjuUYq/kelIbqBoV9sbAgvZ+j1xCgZyNYSkr51WDJWS4WIfK2OX6YcjBGoTicX4RoOVQzx0g==}
+    peerDependencies:
+      three: '>= 0.159.0'
+
+  three-perf@1.0.11:
+    resolution: {integrity: sha512-OgBpZjwL+csQKGKZjpkH/QHdbGFMxqngMbSEJeSnVNfXDYd6On7WHNv/GhUZH4YxIpNMwMahBWrNnsJvnbSJHQ==}
+    peerDependencies:
+      three: '>=0.170'
+
+  three-viewport-gizmo@2.2.0:
+    resolution: {integrity: sha512-Jo9Liur1rUmdKk75FZumLU/+hbF+RtJHi1qsKZpntjKlCYScK6tjbYoqvJ9M+IJphrlQJF5oReFW7Sambh0N4Q==}
+    peerDependencies:
+      three: '>=0.162.0 <1.0.0'
+
+  three@0.176.0:
+    resolution: {integrity: sha512-PWRKYWQo23ojf9oZSlRGH8K09q7nRSWx6LY/HF/UUrMdYgN9i1e2OwJYHoQjwc6HF/4lvvYLC5YC1X8UJL2ZpA==}
+
   tiny-inflate@1.0.3:
     resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
 
···
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
+  troika-three-text@0.52.4:
+    resolution: {integrity: sha512-V50EwcYGruV5rUZ9F4aNsrytGdKcXKALjEtQXIOBfhVoZU9VAqZNIoGQ3TMiooVqFAbR1w15T+f+8gkzoFzawg==}
+    peerDependencies:
+      three: '>=0.125.0'
+
+  troika-three-utils@0.52.4:
+    resolution: {integrity: sha512-NORAStSVa/BDiG52Mfudk4j1FG4jC4ILutB3foPnfGbOeIs9+G5vZLa0pnmnaftZUGm4UwSoqEpWdqvC7zms3A==}
+    peerDependencies:
+      three: '>=0.125.0'
+
+  troika-worker-utils@0.52.0:
+    resolution: {integrity: sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==}
+
   ts-api-utils@2.4.0:
     resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
     engines: {node: '>=18.12'}
···
 
   turndown@7.2.2:
     resolution: {integrity: sha512-1F7db8BiExOKxjSMU2b7if62D/XOyQyZbPKq/nUwopfgnHlqXHqQ0lvfUTeUIr1lZJzOPFn43dODyMSIfvWRKQ==}
+
+  tweakpane@3.1.10:
+    resolution: {integrity: sha512-rqwnl/pUa7+inhI2E9ayGTqqP0EPOOn/wVvSWjZsRbZUItzNShny7pzwL3hVlaN4m9t/aZhsP0aFQ9U5VVR2VQ==}
 
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
···
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
+  webgl-sdf-generator@1.1.1:
+    resolution: {integrity: sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==}
+
   whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
···
   '@cspotcode/source-map-support@0.8.1':
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
+
+  '@dimforge/rapier3d-compat@0.12.0': {}
 
   '@emnapi/runtime@1.8.1':
     dependencies:
···
       '@floating-ui/utils': 0.2.10
 
   '@floating-ui/utils@0.2.10': {}
+
+  '@foxui/3d@0.4.7(svelte@5.48.0)(tailwindcss@4.1.18)':
+    dependencies:
+      '@foxui/core': 0.4.7(svelte@5.48.0)(tailwindcss@4.1.18)
+      '@threlte/core': 8.3.1(svelte@5.48.0)(three@0.176.0)
+      '@threlte/extras': 9.7.1(@types/three@0.176.0)(svelte@5.48.0)(three@0.176.0)
+      '@types/three': 0.176.0
+      bits-ui: 1.8.0(svelte@5.48.0)
+      svelte: 5.48.0
+      tailwindcss: 4.1.18
+      three: 0.176.0
 
   '@foxui/colors@0.4.7(svelte@5.48.0)(tailwindcss@4.1.18)':
     dependencies:
···
 
   '@texel/color@1.1.11': {}
 
+  '@threejs-kit/instanced-sprite-mesh@2.5.1(@types/three@0.176.0)(three@0.176.0)':
+    dependencies:
+      diet-sprite: 0.0.1
+      earcut: 2.2.4
+      maath: 0.10.8(@types/three@0.176.0)(three@0.176.0)
+      three: 0.176.0
+      three-instanced-uniforms-mesh: 0.52.4(three@0.176.0)
+      troika-three-utils: 0.52.4(three@0.176.0)
+    transitivePeerDependencies:
+      - '@types/three'
+
+  '@threlte/core@8.3.1(svelte@5.48.0)(three@0.176.0)':
+    dependencies:
+      mitt: 3.0.1
+      svelte: 5.48.0
+      three: 0.176.0
+
+  '@threlte/extras@9.7.1(@types/three@0.176.0)(svelte@5.48.0)(three@0.176.0)':
+    dependencies:
+      '@threejs-kit/instanced-sprite-mesh': 2.5.1(@types/three@0.176.0)(three@0.176.0)
+      camera-controls: 3.1.2(three@0.176.0)
+      svelte: 5.48.0
+      three: 0.176.0
+      three-mesh-bvh: 0.9.7(three@0.176.0)
+      three-perf: 1.0.11(three@0.176.0)
+      three-viewport-gizmo: 2.2.0(three@0.176.0)
+      troika-three-text: 0.52.4(three@0.176.0)
+    transitivePeerDependencies:
+      - '@types/three'
+
   '@tiptap/core@3.16.0(@tiptap/pm@3.16.0)':
     dependencies:
       '@tiptap/pm': 3.16.0
···
       '@tiptap/extension-underline': 3.16.0(@tiptap/core@3.16.0(@tiptap/pm@3.16.0))
       '@tiptap/extensions': 3.16.0(@tiptap/core@3.16.0(@tiptap/pm@3.16.0))(@tiptap/pm@3.16.0)
       '@tiptap/pm': 3.16.0
+
+  '@tweenjs/tween.js@23.1.3': {}
 
   '@types/bun@1.3.6':
     dependencies:
···
 
   '@types/pbf@3.0.5': {}
 
+  '@types/stats.js@0.17.4': {}
+
   '@types/supercluster@7.1.3':
     dependencies:
       '@types/geojson': 7946.0.16
 
+  '@types/three@0.176.0':
+    dependencies:
+      '@dimforge/rapier3d-compat': 0.12.0
+      '@tweenjs/tween.js': 23.1.3
+      '@types/stats.js': 0.17.4
+      '@types/webxr': 0.5.24
+      '@webgpu/types': 0.1.69
+      fflate: 0.8.2
+      meshoptimizer: 0.18.1
+
   '@types/turndown@5.0.6': {}
+
+  '@types/webxr@0.5.24': {}
 
   '@typescript-eslint/eslint-plugin@8.53.1(@typescript-eslint/parser@8.53.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
···
   '@use-gesture/vanilla@10.3.1':
     dependencies:
       '@use-gesture/core': 10.3.1
+
+  '@webgpu/types@0.1.69': {}
 
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
···
 
   base64-js@0.0.8: {}
 
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
   bits-ui@1.8.0(svelte@5.48.0):
     dependencies:
       '@floating-ui/core': 1.7.3
···
   callsites@3.1.0: {}
 
   camelize@1.0.1: {}
+
+  camera-controls@3.1.2(three@0.176.0):
+    dependencies:
+      three: 0.176.0
 
   canvas-confetti@1.9.4: {}
 
···
 
   devalue@5.6.2: {}
 
+  diet-sprite@0.0.1: {}
+
   dom-serializer@2.0.0:
     dependencies:
       domelementtype: 2.3.0
···
       dom-serializer: 2.0.0
       domelementtype: 2.3.0
       domhandler: 5.0.3
+
+  earcut@2.2.4: {}
 
   earcut@3.0.2: {}
 
···
 
   fflate@0.7.4: {}
 
+  fflate@0.8.2: {}
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
···
 
   lz-string@1.5.0: {}
 
+  maath@0.10.8(@types/three@0.176.0)(three@0.176.0):
+    dependencies:
+      '@types/three': 0.176.0
+      three: 0.176.0
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
···
 
   mdurl@2.0.0: {}
 
+  meshoptimizer@0.18.1: {}
+
   mini-svg-data-uri@1.4.4: {}
 
   miniflare@4.20260120.0:
···
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.2
+
+  mitt@3.0.1: {}
 
   mlly@1.8.0:
     dependencies:
···
 
   regexparam@3.0.0: {}
 
+  require-from-string@2.0.2: {}
+
   resolve-from@4.0.0: {}
 
   resolve-protobuf-schema@2.1.0:
···
 
   tapable@2.3.0: {}
 
+  three-instanced-uniforms-mesh@0.52.4(three@0.176.0):
+    dependencies:
+      three: 0.176.0
+      troika-three-utils: 0.52.4(three@0.176.0)
+
+  three-mesh-bvh@0.9.7(three@0.176.0):
+    dependencies:
+      three: 0.176.0
+
+  three-perf@1.0.11(three@0.176.0):
+    dependencies:
+      three: 0.176.0
+      troika-three-text: 0.52.4(three@0.176.0)
+      tweakpane: 3.1.10
+
+  three-viewport-gizmo@2.2.0(three@0.176.0):
+    dependencies:
+      three: 0.176.0
+
+  three@0.176.0: {}
+
   tiny-inflate@1.0.3: {}
 
   tinyglobby@0.2.15:
···
 
   totalist@3.0.1: {}
 
+  troika-three-text@0.52.4(three@0.176.0):
+    dependencies:
+      bidi-js: 1.0.3
+      three: 0.176.0
+      troika-three-utils: 0.52.4(three@0.176.0)
+      troika-worker-utils: 0.52.0
+      webgl-sdf-generator: 1.1.1
+
+  troika-three-utils@0.52.4(three@0.176.0):
+    dependencies:
+      three: 0.176.0
+
+  troika-worker-utils@0.52.0: {}
+
   ts-api-utils@2.4.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
···
   turndown@7.2.2:
     dependencies:
       '@mixmark-io/domino': 2.2.0
+
+  tweakpane@3.1.10: {}
 
   type-check@0.4.0:
     dependencies:
···
       vite: 7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)
 
   w3c-keyname@2.2.8: {}
+
+  webgl-sdf-generator@1.1.1: {}
 
   whatwg-encoding@3.1.1:
     dependencies:

src/lib/cards/Model3DCard/CreateModel3DCardModal.svelte

···
+<script lang="ts">
+	import { Alert, Button, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let errorMessage = $state('');
+	let fileInput = $state<HTMLInputElement | undefined>(undefined);
+
+	function handleFileSelect(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const file = input.files?.[0];
+
+		if (!file) return;
+
+		const extension = file.name.toLowerCase().split('.').pop();
+		if (!['gltf', 'glb', 'stl', 'fbx'].includes(extension || '')) {
+			errorMessage = 'Please select a .gltf, .glb, .stl, or .fbx file';
+			return;
+		}
+
+		errorMessage = '';
+		item.cardData.modelFile = {
+			blob: file,
+			objectUrl: URL.createObjectURL(file),
+			name: file.name,
+			type: extension
+		};
+	}
+
+	function clearFile() {
+		if (item.cardData.modelFile?.objectUrl) {
+			URL.revokeObjectURL(item.cardData.modelFile.objectUrl);
+		}
+		item.cardData.modelFile = undefined;
+	}
+
+	function canCreate() {
+		if (!item.cardData.modelFile) {
+			errorMessage = 'Please upload a file';
+			return false;
+		}
+		return true;
+	}
+</script>
+
+<Modal open={true} closeButton={false}>
+	<Subheading>Add a 3D Model</Subheading>
+
+	<div>
+		<p class="text-base-600 dark:text-base-400 mb-2 text-sm">
+			Upload a 3D model file (.glb, .stl, .fbx, or .gltf)
+		</p>
+		{#if item.cardData.modelFile}
+			<div
+				class="bg-base-100 dark:bg-base-800 flex items-center justify-between rounded-lg border p-3"
+			>
+				<span class="text-sm">{item.cardData.modelFile.name}</span>
+				<Button size="sm" variant="ghost" onclick={clearFile}>Remove</Button>
+			</div>
+		{:else}
+			<input
+				bind:this={fileInput}
+				type="file"
+				accept=".gltf,.glb,.stl,.fbx"
+				onchange={handleFileSelect}
+				class="hidden"
+			/>
+			<Button variant="secondary" onclick={() => fileInput?.click()} class="w-full">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="mr-2 size-5"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
+					/>
+				</svg>
+				Choose File
+			</Button>
+		{/if}
+	</div>
+
+	{#if errorMessage}
+		<Alert type="error" title="Error"><span>{errorMessage}</span></Alert>
+	{/if}
+
+	<div class="mt-4 flex justify-end gap-2">
+		<Button onclick={oncancel} variant="ghost">Cancel</Button>
+		<Button
+			onclick={() => {
+				if (canCreate()) oncreate();
+			}}
+		>
+			Create
+		</Button>
+	</div>
+</Modal>

src/lib/cards/Model3DCard/Model3DCard.svelte

···
+<script lang="ts">
+	import { Canvas } from '@threlte/core';
+	import { CineonToneMapping } from 'three';
+	import type { ContentComponentProps } from '../types';
+	import Model3DScene from './Model3DScene.svelte';
+	import { getDidContext } from '$lib/website/context';
+	import { getBlobURL } from '$lib/atproto';
+	import type { Did } from '@atcute/lexicons';
+	import { onMount } from 'svelte';
+
+	let { item }: ContentComponentProps = $props();
+
+	let isHovering = $state(false);
+	let objectUrl = $state<string | undefined>(undefined);
+	let isLoading = $state(false);
+
+	const did = getDidContext();
+
+	// Fetch blob from PDS and create object URL (like VideoCard does)
+	onMount(async () => {
+		if (item.cardData.modelBlob?.$type === 'blob') {
+			isLoading = true;
+			try {
+				const pdsUrl = await getBlobURL({ did: did as Did, blob: item.cardData.modelBlob });
+				const response = await fetch(pdsUrl);
+				if (!response.ok) throw new Error(response.statusText);
+				const blob = await response.blob();
+				objectUrl = URL.createObjectURL(blob);
+			} catch (e) {
+				console.error('Failed to load 3D model:', e);
+			} finally {
+				isLoading = false;
+			}
+		}
+	});
+
+	// Get the model URL from various sources
+	let modelUrl = $derived.by(() => {
+		// Local file (during editing before save)
+		if (item.cardData.modelFile?.objectUrl) {
+			return item.cardData.modelFile.objectUrl;
+		}
+
+		// Uploaded blob (after save) - use fetched object URL
+		if (item.cardData.modelBlob?.$type === 'blob') {
+			return objectUrl;
+		}
+
+		return undefined;
+	});
+
+	let modelType = $derived(item.cardData.modelFile?.type || item.cardData.modelType || 'gltf') as
+		| 'gltf'
+		| 'stl'
+		| 'fbx';
+</script>
+
+<div
+	class="absolute inset-0 h-full w-full"
+	role="img"
+	aria-label="3D model viewer"
+	onpointerenter={() => (isHovering = true)}
+	onpointerleave={() => (isHovering = false)}
+>
+	{#if modelUrl}
+		<Canvas toneMapping={CineonToneMapping}>
+			<Model3DScene path={modelUrl} hover={isHovering} {modelType} />
+		</Canvas>
+	{:else if isLoading}
+		<div class="flex h-full items-center justify-center text-sm opacity-50">Loading model...</div>
+	{:else}
+		<div class="flex h-full items-center justify-center text-sm opacity-50">No model loaded</div>
+	{/if}
+</div>

src/lib/cards/Model3DCard/Model3DScene.svelte

···
+<script lang="ts">
+	import { T, useTask, useThrelte } from '@threlte/core';
+	import { GLTF, OrbitControls } from '@threlte/extras';
+	import type { ThrelteGltf } from '@threlte/extras';
+	import { onMount } from 'svelte';
+	import {
+		Box3,
+		Group,
+		Vector3,
+		BufferGeometry,
+		Mesh,
+		MeshStandardMaterial,
+		type Object3D
+	} from 'three';
+	import { STLLoader } from 'three/addons/loaders/STLLoader.js';
+	import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
+
+	let {
+		path,
+		hover = false,
+		modelType = 'gltf'
+	}: {
+		path: string;
+		hover?: boolean;
+		modelType?: 'gltf' | 'stl' | 'fbx';
+	} = $props();
+
+	let rotation = $state(0);
+	let group: Group | undefined = $state();
+	let stlMesh: Mesh | undefined = $state();
+	let stlLoaded = $state(false);
+	let fbxGroup: Group | undefined = $state();
+	let fbxLoaded = $state(false);
+
+	const { start, stop } = useTask((delta: number) => {
+		rotation += delta * 0.5;
+	});
+
+	$effect(() => {
+		if (hover) {
+			start();
+		} else {
+			stop();
+		}
+	});
+
+	const { renderer } = useThrelte();
+
+	onMount(() => {
+		renderer.toneMappingExposure = 0.7;
+	});
+
+	// Load STL file
+	$effect(() => {
+		if (modelType === 'stl' && path) {
+			stlLoaded = false;
+			const loader = new STLLoader();
+			loader.load(
+				path,
+				(geometry: BufferGeometry) => {
+					// Center and scale the geometry
+					geometry.computeBoundingBox();
+					const box = geometry.boundingBox;
+					if (box) {
+						const size = new Vector3();
+						box.getSize(size);
+						const center = new Vector3();
+						box.getCenter(center);
+
+						const maxSize = Math.max(size.x, size.y, size.z);
+						const scale = 1.2 / maxSize;
+
+						geometry.translate(-center.x, -center.y, -center.z);
+						geometry.scale(scale, scale, scale);
+					}
+
+					// Create mesh with a nice material
+					const material = new MeshStandardMaterial({
+						color: 0x808080,
+						metalness: 0.3,
+						roughness: 0.6
+					});
+
+					stlMesh = new Mesh(geometry, material);
+					stlLoaded = true;
+				},
+				undefined,
+				(error) => {
+					console.error('Error loading STL:', error);
+				}
+			);
+		}
+	});
+
+	// Load FBX file
+	$effect(() => {
+		if (modelType === 'fbx' && path) {
+			fbxLoaded = false;
+			const loader = new FBXLoader();
+			loader.load(
+				path,
+				(object: Group) => {
+					// Center and scale the model
+					const box = new Box3().setFromObject(object);
+					const size = box.getSize(new Vector3());
+					const center = box.getCenter(new Vector3());
+
+					const maxSize = Math.max(size.x, size.y, size.z);
+					const scale = 1.2 / maxSize;
+
+					object.scale.set(scale, scale, scale);
+					object.position.set(-center.x * scale, -center.y * scale, -center.z * scale);
+
+					fbxGroup = object;
+					fbxLoaded = true;
+				},
+				undefined,
+				(error) => {
+					console.error('Error loading FBX:', error);
+				}
+			);
+		}
+	});
+
+	function handleGltfLoad(gltf: ThrelteGltf) {
+		if (!group) return;
+
+		const box = new Box3().setFromObject(gltf.scene as Object3D);
+		const size = box.getSize(new Vector3());
+		const center = box.getCenter(new Vector3());
+
+		let maxSize = Math.max(size.x, size.y, size.z);
+		let scale = 1.2 / maxSize;
+
+		group.scale.set(scale, scale, scale);
+		group.position.set(-center.x * scale, -center.y * scale, -center.z * scale);
+	}
+</script>
+
+<T.PerspectiveCamera makeDefault position={[0, 0, 2.5]} fov={50} near={0.1} far={100}>
+	<OrbitControls enableZoom={false} enablePan={false} />
+</T.PerspectiveCamera>
+
+<T.DirectionalLight args={[0xffffff, 2]} position={[-1, 1, 1]} />
+<T.AmbientLight args={[0xffffff, 0.7]} />
+
+<T.Group rotation={[0.3, rotation + 0.5, 0]}>
+	{#if modelType === 'stl'}
+		{#if stlLoaded && stlMesh}
+			<T is={stlMesh} />
+		{/if}
+	{:else if modelType === 'fbx'}
+		{#if fbxLoaded && fbxGroup}
+			<T is={fbxGroup} />
+		{/if}
+	{:else}
+		<T.Group bind:ref={group}>
+			<GLTF url={path} onload={handleGltfLoad} />
+		</T.Group>
+	{/if}
+</T.Group>

src/lib/cards/Model3DCard/index.ts

···
+import { uploadBlob } from '$lib/atproto';
+import type { CardDefinition } from '../types';
+import CreateModel3DCardModal from './CreateModel3DCardModal.svelte';
+import Model3DCard from './Model3DCard.svelte';
+
+export const Model3DCardDefinition = {
+	type: 'model3d',
+	contentComponent: Model3DCard,
+	creationModalComponent: CreateModel3DCardModal,
+	sidebarButtonText: '3D Model',
+
+	createNew: (card) => {
+		card.w = 4;
+		card.h = 4;
+		card.mobileW = 4;
+		card.mobileH = 4;
+		card.cardData = {
+			modelType: 'gltf' // 'gltf' | 'stl'
+		};
+	},
+
+	upload: async (item) => {
+		// Handle file upload
+		if (item.cardData.modelFile?.blob) {
+			let blob: Blob = item.cardData.modelFile.blob;
+			const modelType = item.cardData.modelFile.type || 'glb';
+
+			// Ensure blob has a MIME type (STL/FBX files often have empty type)
+			if (!blob.type) {
+				const mimeTypes: Record<string, string> = {
+					stl: 'model/stl',
+					glb: 'model/gltf-binary',
+					gltf: 'model/gltf+json',
+					fbx: 'application/octet-stream'
+				};
+				const mimeType = mimeTypes[modelType] || 'application/octet-stream';
+				blob = new Blob([blob], { type: mimeType });
+			}
+
+			// Upload the blob to the PDS
+			const uploadedBlob = await uploadBlob({ blob });
+
+			if (uploadedBlob) {
+				item.cardData.modelBlob = uploadedBlob;
+				item.cardData.modelType = modelType;
+			}
+
+			// Clean up the temporary file data
+			if (item.cardData.modelFile.objectUrl) {
+				URL.revokeObjectURL(item.cardData.modelFile.objectUrl);
+			}
+			delete item.cardData.modelFile;
+		}
+
+		return item;
+	},
+
+	minW: 2,
+	minH: 2,
+
+	name: '3D Model Card'
+} as CardDefinition & { type: 'model3d' };

src/lib/cards/index.ts

···
 import { VCardCardDefinition } from './VCardCard';
 import { DrawCardDefinition } from './DrawCard';
 import { TimerCardDefinition } from './TimerCard';
+import { Model3DCardDefinition } from './Model3DCard';
 
 export const AllCardDefinitions = [
 	ImageCardDefinition,
···
 	EventCardDefinition,
 	VCardCardDefinition,
 	DrawCardDefinition,
-	TimerCardDefinition
+	TimerCardDefinition,
+	Model3DCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(