@threlte/gltf 0.0.5 → 1.0.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @threlte/gltf
 
+## 1.0.0-next.0
+
+### Major Changes
+
+- 3a5376e2: Adapted gltf package to Threlte 6 T syntax
+
 ## 0.0.5
 
 ### Patch Changes

package/package.json

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

package/readme.md

@@ -58,20 +58,20 @@ Command: npx gltfjsx@0.0.1 ./stacy.glb
 -->
 <script>
   import { Group } from 'three'
-  import { T, Three } from '@threlte/core'
+  import { T } from '@threlte/core'
   import { useGltf, useGltfAnimations } from '@threlte/extras'
 
   export const ref = new Group()
 
-  const { gltf } = useGltf('/stacy.glb')
+  const gltf = useGltf('/stacy.glb')
   export const { actions, mixer } = useGltfAnimations(gltf, ref)
 </script>
 
 {#if $gltf}
-  <Three type={ref} {...$$restProps}>
+  <T is={ref} {...$$restProps}>
     <T.Group name="Scene">
       <T.Group name="Stacy" rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
-        <Three type={$gltf.nodes.mixamorigHips} />
+        <T is={$gltf.nodes.mixamorigHips} />
         <T.SkinnedMesh
           name="stacy"
           geometry={$gltf.nodes.stacy.geometry}
@@ -84,7 +84,7 @@ Command: npx gltfjsx@0.0.1 ./stacy.glb
     </T.Group>
 
     <slot {ref} />
-  </Three>
+  </T>
 {/if}
 ```
 
@@ -161,7 +161,7 @@ Command: npx gltfjsx@0.0.1 ./stacy.glb -t
 <script lang="ts">
   import type * as THREE from 'three'
   import { Group } from 'three'
-  import { T, Three, type Props, type Events, type Slots } from '@threlte/core'
+  import { T, type Props, type Events, type Slots } from '@threlte/core'
   import { useGltf, useGltfAnimations } from '@threlte/extras'
 
   type $$Props = Props<THREE.Group>
@@ -179,15 +179,15 @@ Command: npx gltfjsx@0.0.1 ./stacy.glb -t
     materials: {}
   }
 
-  const { gltf } = useGltf<GLTFResult>('/stacy.glb')
+  const gltf = useGltf<GLTFResult>('/stacy.glb')
   export const { actions, mixer } = useGltfAnimations<ActionName>(gltf, ref)
 </script>
 
 {#if $gltf}
-  <Three type={ref} {...$$restProps}>
+  <T is={ref} {...$$restProps}>
     <T.Group name="Scene">
       <T.Group name="Stacy" rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
-        <Three type={$gltf.nodes.mixamorigHips} />
+        <T is={$gltf.nodes.mixamorigHips} />
         <T.SkinnedMesh
           name="stacy"
           geometry={$gltf.nodes.stacy.geometry}
@@ -200,7 +200,7 @@ Command: npx gltfjsx@0.0.1 ./stacy.glb -t
     </T.Group>
 
     <slot {ref} />
-  </Three>
+  </T>
 {/if}
 ```
 
@@ -209,7 +209,7 @@ 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')
+const gltf = useGltf('/stacy.glb')
 export const { actions, mixer } = useGltfAnimations(gltf, ref)
 ```
 

package/src/utils/parser.js

@@ -374,7 +374,7 @@ function parse(fileName, gltf, options = {}) {
 
     // Bail out on lights and bones
     if (type === 'bone') {
-      return `<Three type={$gltf.${node}} />\n`
+      return `<T is={$gltf.${node}} />\n`
     }
 
     // Collect children
@@ -482,7 +482,7 @@ ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}-->
 
         ${options.types ? `\nimport type * as THREE from 'three'` : ''}
         import { Group } from 'three'
-        import { ${['T', 'Three', options.types ? 'type Props, type Events, type Slots' : ''].join(
+        import { ${['T', options.types ? 'type Props, type Events, type Slots' : ''].join(
           ', '
         )} } from '@threlte/core'
         import { ${['useGltf', hasAnimations ? 'useGltfAnimations' : ''].join(
@@ -497,7 +497,7 @@ ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}-->
 
         ${options.types ? printThrelteTypes(objects, animations) : ''}
 
-        const { gltf } = useGltf${options.types ? '<GLTFResult>' : ''}('${url}'${
+        const gltf = useGltf${options.types ? '<GLTFResult>' : ''}('${url}'${
     useGltfOptions ? `, ${JSON.stringify(useGltfOptions)}` : ''
   })
     ${
@@ -511,13 +511,13 @@ ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}-->
     </script>
 
     {#if $gltf}
-            <Three type={ref} {...$$restProps}>
+			<T is={ref} {...$$restProps}>
         ${scene}
 
         <slot {ref} />
-            </Three>
-            {/if}
-        `
+			</T>
+		{/if}
+	`
 }
 
 export default parse