@threlte/gltf 0.0.5 → 1.0.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @threlte/gltf
 
+## 1.0.0-next.1
+
+### Minor Changes
+
+- 72c71414: Added option to add a preload method that makes preloading an asset easy. Also, added the option to make an isolated component (so no \$\$restProps usage)
+
+## 1.0.0-next.0
+
+### Major Changes
+
+- 3a5376e2: Adapted gltf package to Threlte 6 T syntax
+
 ## 0.0.5
 
 ### Patch Changes

package/cli.js

@@ -12,19 +12,21 @@ const __dirname = dirname(__filename)
 
 const cli = meow(
   `
-	Usage
-	  $ npx @threlte/gltf [Model.glb] [options]
+  Usage
+    $ npx @threlte/gltf [Model.glb] [options]
 
-	Options
+  Options
     --output, -o        Output file name/path
     --types, -t         Add Typescript definitions
     --keepnames, -k     Keep original names
     --keepgroups, -K    Keep (empty) groups, disable pruning
     --meta, -m          Include metadata (as userData)
-    --shadows, s        Let meshes cast and receive shadows
-    --printwidth, w     Prettier printWidth (default: 120)
+    --shadows, -s       Let meshes cast and receive shadows
+    --printwidth, -w    Prettier printWidth (default: 120)
     --precision, -p     Number of fractional digits (default: 2)
     --draco, -d         Draco binary path
+    --preload -P        Add preload method to module script
+    --isolated, -i      Output as isolated module (No $$restProps usage)
     --root, -r          Sets directory from which .gltf file is served
     --transform, -T     Transform the asset for the web (draco, prune, resize)
       --resolution, -R  Transform resolution for texture resizing (default: 1024)
@@ -45,6 +47,8 @@ const cli = meow(
       printwidth: { type: 'number', alias: 'p', default: 120 },
       meta: { type: 'boolean', alias: 'm' },
       precision: { type: 'number', alias: 'p', default: 2 },
+      isolated: { type: 'boolean', alias: 'i', default: false },
+      preload: { type: 'boolean', alias: 'P', default: false },
       draco: { type: 'string', alias: 'd' },
       root: { type: 'string', alias: 'r' },
       transform: { type: 'boolean', alias: 'T' },
@@ -60,6 +64,15 @@ const cli = meow(
 
 const { packageJson } = readPackageUpSync({ cwd: __dirname, normalize: false })
 
+function toPascalCase(string) {
+  return `${string}`
+    .toLowerCase()
+    .replace(new RegExp(/[-_]+/, 'g'), ' ')
+    .replace(new RegExp(/[^\w\s]/, 'g'), '')
+    .replace(new RegExp(/\s+(.)(\w*)/, 'g'), ($1, $2, $3) => `${$2.toUpperCase() + $3}`)
+    .replace(new RegExp(/\w/), (s) => s.toUpperCase())
+}
+
 if (cli.input.length === 0) {
   console.log(cli.help)
 } else {
@@ -69,16 +82,20 @@ if (cli.input.length === 0) {
 Command: npx @threlte/gltf@${packageJson.version} ${process.argv.slice(2).join(' ')}`
   }
   const file = cli.input[0]
-  const filePath = path.resolve(__dirname, file)
   let nameExt = file.match(/[-_\w]+[.][\w]+$/i)[0]
   let name = nameExt.split('.').slice(0, -1).join('.')
-  const baseName = name.charAt(0).toUpperCase() + name.slice(1)
+  const baseName = toPascalCase(name.charAt(0).toUpperCase() + name.slice(1))
   const output = baseName + '.svelte'
   const showLog = (log) => {
     console.info('log:', log)
   }
   try {
-    const response = await gltf(file, output, { ...config, showLog, timeout: 0, delay: 1 })
+    const response = await gltf(file, output, baseName, {
+      ...config,
+      showLog,
+      timeout: 0,
+      delay: 1
+    })
   } catch (e) {
     console.error(e)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/gltf",
-  "version": "0.0.5",
+  "version": "1.0.0-next.1",
   "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/index.js

@@ -22,7 +22,7 @@ function toArrayBuffer(buf) {
   return ab
 }
 
-export default function (file, output, options) {
+export default function (file, output, baseName, options) {
   function getRelativeFilePath(file) {
     const filePath = path.resolve(file)
     const rootPath = options.root ? path.resolve(options.root) : path.dirname(file)
@@ -53,7 +53,7 @@ export default function (file, output, options) {
           arrayBuffer,
           '',
           (gltf) => {
-            const raw = parse(filePath, gltf, options)
+            const raw = parse(filePath, baseName, gltf, options)
             try {
               const prettiered = prettier.format(raw, {
                 semi: false,

package/src/utils/parser.js

@@ -1,7 +1,7 @@
 import THREE from 'three'
 import isVarName from './isVarName.js'
 
-function parse(fileName, gltf, options = {}) {
+function parse(fileName, baseName, gltf, options = {}) {
   const url = (fileName.toLowerCase().startsWith('http') ? '' : '/') + fileName
   const animations = gltf.animations
   const hasAnimations = animations.length > 0
@@ -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
@@ -467,6 +467,22 @@ function parse(fileName, gltf, options = {}) {
         }
       : undefined
 
+  const imports = `
+	${options.types ? `\nimport type * as THREE from 'three'` : ''}
+        import { Group } from 'three'
+        import { ${[
+          'T',
+          options.types && !options.isolated ? 'type Props, type Events, type Slots' : ''
+        ].join(', ')} } from '@threlte/core'
+        import { ${['useGltf', hasAnimations ? 'useGltfAnimations' : ''].join(
+          ', '
+        )} } from '@threlte/extras'
+	`
+
+  const useGltf = `useGltf${options.types ? '<GLTFResult>' : ''}('${url}'${
+    useGltfOptions ? `, ${JSON.stringify(useGltfOptions)}` : ''
+  })`
+
   // Output
   return `
     <!--
@@ -477,29 +493,41 @@ ${
 }
 ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}-->
 
-    <script${options.types ? ' lang="ts"' : ''}>
+${
+  options.preload
+    ? `
 
+<script context="module"${options.types ? ' lang="ts"' : ''}>
+	${imports}
 
-        ${options.types ? `\nimport type * as THREE from 'three'` : ''}
-        import { Group } from 'three'
-        import { ${['T', 'Three', options.types ? 'type Props, type Events, type Slots' : ''].join(
-          ', '
-        )} } from '@threlte/core'
-        import { ${['useGltf', hasAnimations ? 'useGltfAnimations' : ''].join(
-          ', '
-        )} } from '@threlte/extras'
+	${options.types ? printThrelteTypes(objects, animations) : ''}
+
+	const load = () => {
+		return ${useGltf}
+	}
+
+	export const preload${baseName} = () => {
+		load()
+	}
+</script>
+`
+    : ''
+}
 
-        ${options.types ? 'type $$Props = Props<THREE.Group>' : ''}
-        ${options.types ? 'type $$Events = Events<THREE.Group>' : ''}
-        ${options.types ? 'type $$Slots = Slots<THREE.Group>' : ''}
+
+    <script${options.types ? ' lang="ts"' : ''}>
+
+				${!options.preload ? imports : ''}
+
+        ${options.types && !options.isolated ? 'type $$Props = Props<THREE.Group>' : ''}
+        ${options.types && !options.isolated ? 'type $$Events = Events<THREE.Group>' : ''}
+        ${options.types && !options.isolated ? 'type $$Slots = Slots<THREE.Group>' : ''}
 
         export const ref = new Group()
 
-        ${options.types ? printThrelteTypes(objects, animations) : ''}
+        ${options.types && !options.preload ? printThrelteTypes(objects, animations) : ''}
 
-        const { gltf } = useGltf${options.types ? '<GLTFResult>' : ''}('${url}'${
-    useGltfOptions ? `, ${JSON.stringify(useGltfOptions)}` : ''
-  })
+        ${!options.preload ? `const gltf = ${useGltf}` : 'const gltf = load()'}
     ${
       hasAnimations
         ? `export const { actions, mixer } = useGltfAnimations${
@@ -511,13 +539,13 @@ ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}-->
     </script>
 
     {#if $gltf}
-            <Three type={ref} {...$$restProps}>
+			<T is={ref} dispose={false} ${!options.isolated ? '{...$$restProps}' : ''}>
         ${scene}
 
         <slot {ref} />
-            </Three>
-            {/if}
-        `
+			</T>
+		{/if}
+	`
 }
 
 export default parse