@threlte/gltf 3.0.0-next.5 → 3.0.0-next.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @threlte/gltf
 
+## 3.0.0-next.7
+
+### Patch Changes
+
+- 946e7a8: fix parser for animated assets
+
+## 3.0.0-next.6
+
+### Patch Changes
+
+- 7a3281c: Split out gltf-related loaders into hooks for better tree shaking
+
 ## 3.0.0-next.5
 
 ### Patch Changes

package/README.md

@@ -286,8 +286,10 @@ Command: npx gltfjsx@0.0.1 ./stacy.glb -t
 
 If your GLTF contains animations it will add [@threlte/extras's `useGltfAnimations`](https://threlte.xyz/extras/use-gltf-animations) hook, which extracts all clips and prepares them as actions:
 
-```svelte
-const gltf = useGltf('/stacy.glb') export const {(actions, mixer)} = useGltfAnimations(gltf, ref)
+```ts
+const gltf = useGltf('/stacy.glb')
+
+export const {(actions, mixer)} = useGltfAnimations(gltf, ref)
 ```
 
 If you want to play an animation you can do so at any time:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/gltf",
-  "version": "3.0.0-next.5",
+  "version": "3.0.0-next.7",
   "description": "GLTF to Threlte converter",
   "type": "module",
   "keywords": [

package/src/utils/parser.js

@@ -466,19 +466,13 @@ function parse(fileName, gltf, options = {}) {
   // 2nd pass to eliminate hard to swat left-overs
   const scene = printThrelte(gltf.scene)
 
-  const useGltfOptions =
-    options.transform && options.draco
-      ? {
-          useDraco: options.draco
-        }
-      : options.transform
-        ? {
-            useDraco: true
-          }
-        : undefined
+  const useGltfOptions = {
+    draco: options.transform && options.draco ? (options.draco ? options.transform : true) : false
+  }
 
   const imports = `
 	${options.types ? `\nimport type * as THREE from 'three'` : ''}
+	${hasAnimations ? `import { Group } from 'three'` : ''}
   ${options.types ? `import type { Snippet } from 'svelte'` : ''}
         import { ${['T', options.types && !options.isolated ? 'type Props' : '']
           .filter(Boolean)
@@ -486,7 +480,8 @@ function parse(fileName, gltf, options = {}) {
         import { ${[
           'useGltf',
           hasAnimations ? 'useGltfAnimations' : '',
-          options.suspense ? 'useSuspense' : ''
+          options.suspense ? 'useSuspense' : '',
+          useGltfOptions.draco ? 'useDraco' : ''
         ]
           .filter(Boolean)
           .join(', ')} } from '@threlte/extras'
@@ -494,7 +489,7 @@ function parse(fileName, gltf, options = {}) {
 
   const useGltf = `${options.suspense ? 'suspend(' : ''}useGltf${
     options.types ? '<GLTFResult>' : ''
-  }('${url}'${useGltfOptions ? `, ${JSON.stringify(useGltfOptions)}` : ''})${
+  }('${url}'${useGltfOptions.draco ? `, { dracoLoader: useDraco(${typeof useGltfOptions.draco === 'string' ? `'${useGltfOptions.draco}'` : ''}) }` : ''})${
     options.suspense ? ')' : ''
   }`
 
@@ -552,9 +547,12 @@ ${
 
 				${!options.preload && options.suspense ? 'const suspend = useSuspense()' : ''}
 
+				${hasAnimations && options.isolated ? 'const ref = new Group()' : hasAnimations ? 'ref = new Group()' : ''}
+
         ${options.types && !options.preload ? printThrelteTypes(objects, animations) : ''}
 
         ${!options.preload ? `const gltf = ${useGltf}` : 'const gltf = load()'}
+
     ${
       hasAnimations
         ? `export const { actions, mixer } = useGltfAnimations${
@@ -564,7 +562,7 @@ ${
     }
     </script>
 
-		<T.Group ${options.isolated ? '' : 'bind:ref'} dispose={false} ${!options.isolated ? '{...props}' : ''}>
+		<${hasAnimations ? 'T is={ref}' : 'T.Group'} ${!hasAnimations && !options.isolated ? 'bind:ref' : ''} dispose={false} ${!options.isolated ? '{...props}' : ''}>
 			{#await gltf}
         {@render fallback?.()}
 			{:then gltf}
@@ -574,7 +572,7 @@ ${
 			{/await}
 
       {@render children?.(${options.isolated ? '' : '{ ref }'})}
-		</T.Group>
+		</${hasAnimations ? 'T' : 'T.Group'}>
 	`
 }