@threlte/gltf 0.0.4 → 1.0.0-next.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @threlte/gltf
+
+## 1.0.0-next.0
+
+### Major Changes
+
+- 3a5376e2: Adapted gltf package to Threlte 6 T syntax
+
+## 0.0.5
+
+### Patch Changes
+
+- 8520f65: useDraco bugfix

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@threlte/gltf",
-  "version": "0.0.4",
+  "version": "1.0.0-next.0",
   "description": "GLTF to Threlte converter",
-  "scripts": {
-    "cleanup": "rm -rf node_modules"
-  },
   "type": "module",
   "keywords": [
     "gltf",
@@ -65,5 +62,8 @@
     "*.{js,jsx,ts,tsx}": [
       "prettier --write"
     ]
+  },
+  "scripts": {
+    "cleanup": "rm -rf node_modules"
   }
-}
+}

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)
 ```
 
@@ -244,3 +244,7 @@ gltfLoader.load(url, (gltf) => {
 - [three](https://github.com/mrdoob/three.js/) (>= 122.x)
 - @threlte/core > 5.0.0
 - @threlte/core > 4.9.3
+
+## Credits
+
+This tool started off as a fork of [gltfjsx](https://github.com/pmndrs/gltfjsx) by [pmndrs](https://pmnd.rs/).

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
@@ -456,6 +456,17 @@ 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
+
   // Output
   return `
     <!--
@@ -471,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(
@@ -486,12 +497,8 @@ ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}-->
 
         ${options.types ? printThrelteTypes(objects, animations) : ''}
 
-        const { gltf } = useGltf${options.types ? '<GLTFResult>' : ''}('${url}'${
-    options.draco
-      ? `, {
-          useDraco: ${JSON.stringify(options.draco)},
-        }`
-      : ''
+        const gltf = useGltf${options.types ? '<GLTFResult>' : ''}('${url}'${
+    useGltfOptions ? `, ${JSON.stringify(useGltfOptions)}` : ''
   })
     ${
       hasAnimations
@@ -504,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

package/Arcade.svelte

@@ -1,86 +0,0 @@
-<!--
-Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
-Command: npx @threlte/gltf@0.0.3 Arcade.glb
--->
-<script>
-  import { Group } from 'three'
-  import { T, Three } from '@threlte/core'
-  import { useGltf } from '@threlte/extras'
-
-  export const ref = new Group()
-
-  const { gltf } = useGltf('/Arcade.glb')
-</script>
-
-{#if $gltf}
-  <Three type={ref} {...$$restProps}>
-    <T.Mesh
-      geometry={$gltf.nodes.Screen.geometry}
-      material={$gltf.materials.Screen}
-      position={[0, 1.38, 0.14]}
-      scale={1.01}
-    />
-    <T.Mesh
-      geometry={$gltf.nodes.BodyMesh.geometry}
-      material={$gltf.materials['machine body main']}
-      position={[0.28, 0, 0]}
-    />
-    <T.Mesh
-      geometry={$gltf.nodes.LeftCover.geometry}
-      material={$gltf.materials['machine body outer']}
-      position={[0.3, 1.21, -0.13]}
-    />
-    <T.Mesh
-      geometry={$gltf.nodes.RightCover.geometry}
-      material={$gltf.materials['machine body outer']}
-      position={[-0.3, 1.21, -0.13]}
-      scale={[-1, 1, 1]}
-    />
-    <T.Mesh
-      geometry={$gltf.nodes.ScreenFrame.geometry}
-      material={$gltf.materials['screen frame']}
-      position={[0.28, 0.06, 0.03]}
-    />
-    <T.Mesh
-      geometry={$gltf.nodes.joystick_base.geometry}
-      material={$gltf.materials['joystick base']}
-      position={[0.13, 0.96, -0.2]}
-      rotation={[-0.19, 0, 0]}
-    />
-    <T.Mesh
-      geometry={$gltf.nodes.Main_Button_Enclosure.geometry}
-      material={$gltf.materials['joystick base']}
-      position={[-0.11, 0.98, -0.09]}
-      rotation={[-0.18, 0, 0]}
-      scale={0.94}
-    >
-      <T.Mesh
-        geometry={$gltf.nodes.Main_Button.geometry}
-        material={$gltf.materials['joystick cap']}
-        position={[0, 0.01, 0]}
-        rotation={[0.19, 0, 0]}
-        scale={0.72}
-      />
-    </T.Mesh>
-    <T.Mesh
-      geometry={$gltf.nodes.joystick_stick_application.geometry}
-      material={$gltf.materials['joystick base']}
-      position={[0.13, 0.97, -0.2]}
-      rotation={[-0.19, 0, 0]}
-    >
-      <T.Mesh
-        geometry={$gltf.nodes.joystick_stick.geometry}
-        material={$gltf.materials['joystick stick']}
-        position={[0, -0.01, 0]}
-      >
-        <T.Mesh
-          geometry={$gltf.nodes.joystick_cap.geometry}
-          material={$gltf.materials['joystick cap']}
-          position={[0, 0.11, 0]}
-        />
-      </T.Mesh>
-    </T.Mesh>
-
-    <slot {ref} />
-  </Three>
-{/if}