@threlte/gltf 3.0.5 → 3.0.7

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @threlte/gltf
 
+## 3.0.7
+
+### Patch Changes
+
+- e854fb5: Add multiple SkinnedMesh support
+
+## 3.0.6
+
+### Patch Changes
+
+- 766701b: Fixed -p flag collision between --printwidth and --precision
+- 766701b: Fixed --printwidth flag being ignored
+- 766701b: Fixed ReferenceError crash when using --degrade flag
+
 ## 3.0.5
 
 ### Patch Changes

package/cli.js

@@ -47,7 +47,7 @@ const cli = meow(
       keepnames: { type: 'boolean', shortFlag: 'k' },
       keepgroups: { type: 'boolean', shortFlag: 'K' },
       shadows: { type: 'boolean', shortFlag: 's' },
-      printwidth: { type: 'number', shortFlag: 'p', default: 120 },
+      printwidth: { type: 'number', shortFlag: 'w', default: 120 },
       meta: { type: 'boolean', shortFlag: 'm' },
       precision: { type: 'number', shortFlag: 'p', default: 2 },
       isolated: { type: 'boolean', shortFlag: 'i', default: false },
@@ -62,6 +62,7 @@ const cli = meow(
       simplify: { type: 'boolean', shortFlag: 'S', default: false },
       keepmeshes: { type: 'boolean', shortFlag: 'j', default: false },
       keepmaterials: { type: 'boolean', shortFlag: 'M', default: false },
+      format: { type: 'string', shortFlag: 'f', default: 'webp' },
       ratio: { type: 'number', default: 0.75 },
       error: { type: 'number', default: 0.001 },
       debug: { type: 'boolean', shortFlag: 'D' }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/gltf",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "description": "GLTF to Threlte converter",
   "type": "module",
   "keywords": [

package/src/index.js

@@ -39,7 +39,7 @@ export default async function (file, output, options) {
     singleQuote: true,
     trailingComma: 'es5',
     semi: false,
-    printWidth: 100,
+    printWidth: options.printwidth ?? 100,
     parser: 'svelte',
     plugins: [prettierPluginSvelte],
     overrides: [

package/src/utils/Options.d.ts

@@ -19,4 +19,14 @@ export type Options = {
   ratio?: number
   error?: number
   debug?: boolean
+  keepmeshes?: boolean
+  keepmaterials?: boolean
+  format?: string
+  degrade?: string
+  degraderesolution?: number
+  console?: boolean
+  header?: string
+  showLog?: (log: string) => void
+  timeout?: number
+  delay?: number
 }

package/src/utils/parser.js

@@ -21,6 +21,9 @@ export function parse(fileName, gltf, options = {}) {
   const objects = []
   gltf.scene.traverse((child) => objects.push(child))
 
+  // Detect skinned meshes — these need per-instance cloning
+  const hasSkinnedMeshes = objects.some((o) => o.isSkinnedMesh)
+
   // Browse for duplicates
   const duplicates = {
     names: {},
@@ -53,7 +56,7 @@ export function parse(fileName, gltf, options = {}) {
     }
 
     if (child.geometry) {
-      const key = child.geometry.uuid + child.material?.name ?? ''
+      const key = child.geometry.uuid + (child.material?.name ?? '')
       if (!duplicates.geometries[key]) {
         let name = (child.name || 'Part').replace(/[^a-zA-Z]/g, '')
         name = name.charAt(0).toUpperCase() + name.slice(1)
@@ -77,7 +80,7 @@ export function parse(fileName, gltf, options = {}) {
   }
 
   function sanitizeName(name) {
-    return isVarName(name) ? `.${name}` : `['${name}']`
+    return isVarName(name) ? `.${name}` : `['${name.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}']`
   }
 
   const rNbr = (number) => {
@@ -184,14 +187,15 @@ export function parse(fileName, gltf, options = {}) {
         else result += `material={gltf.${node}.material} `
       }
 
-      if (obj.skeleton) result += `skeleton={gltf.${node}.skeleton} `
+      if (obj.skeleton)
+        result += `skeleton={${hasSkinnedMeshes ? `clonedNodes${sanitizeName(obj.name)}` : `gltf.${node}`}.skeleton} `
       if (obj.visible === false) result += `visible={false} `
       if (obj.castShadow === true) result += `castShadow `
       if (obj.receiveShadow === true) result += `receiveShadow `
       if (obj.morphTargetDictionary)
-        result += `morphTargetDictionary={gltf.${node}.morphTargetDictionary} `
+        result += `morphTargetDictionary={${hasSkinnedMeshes ? `clonedNodes${sanitizeName(obj.name)}` : `gltf.${node}`}.morphTargetDictionary} `
       if (obj.morphTargetInfluences)
-        result += `morphTargetInfluences={gltf.${node}.morphTargetInfluences} `
+        result += `morphTargetInfluences={${hasSkinnedMeshes ? `clonedNodes${sanitizeName(obj.name)}` : `gltf.${node}`}.morphTargetInfluences} `
       if (obj.intensity && rNbr(obj.intensity)) result += `intensity={${rNbr(obj.intensity)}} `
       //if (obj.power && obj.power !== 4 * Math.PI) result += `power={${rNbr(obj.power)}} `
       if (obj.angle && obj.angle !== Math.PI / 3) result += `angle={${rDeg(obj.angle)}} `
@@ -402,7 +406,7 @@ export function parse(fileName, gltf, options = {}) {
 
     // Bail out on lights and bones
     if (type === 'bone') {
-      return `<T is={gltf.${node}} />\n`
+      return `<T is={${hasSkinnedMeshes ? `clonedNodes${sanitizeName(obj.name)}` : `gltf.${node}`}} />\n`
     }
 
     // Collect children
@@ -495,6 +499,7 @@ export function parse(fileName, gltf, options = {}) {
   const imports = `
 	${options.types ? `\nimport type * as THREE from 'three'` : ''}
 	${hasAnimations ? `import { Group } from 'three'` : ''}
+  ${hasSkinnedMeshes ? `import { clone as cloneSkeleton } from 'three/examples/jsm/utils/SkeletonUtils.js'` : ''}
   ${options.types ? `import type { Snippet } from 'svelte'` : ''}
         import { ${['T', options.types && !options.isolated ? 'type Props' : '']
           .filter(Boolean)
@@ -528,7 +533,7 @@ ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}-->
 ${
   options.preload
     ? `
-<script context="module"${options.types ? ' lang="ts"' : ''}>
+<script module${options.types ? ' lang="ts"' : ''}>
 	${imports}
 
 	${options.types ? printThrelteTypes(objects, animations) : ''}
@@ -575,6 +580,19 @@ ${
 
         ${!options.preload ? `const gltf = ${useGltf}` : 'const gltf = load()'}
 
+    ${
+      hasSkinnedMeshes
+        ? `function cloneScene(scene${options.types ? ': THREE.Group' : ''}) {
+      const clone = cloneSkeleton(scene)
+      const nodes${options.types ? ': Record<string, THREE.Object3D>' : ''} = {}
+      clone.traverse((child) => {
+        if (child.name) nodes[child.name] = child
+      })
+      return nodes${options.types ? ' as unknown as GLTFResult["nodes"]' : ''}
+    }`
+        : ''
+    }
+
     ${
       hasAnimations
         ? `export const { actions, mixer } = useGltfAnimations${
@@ -588,6 +606,7 @@ ${
 			{#await gltf}
         {@render fallback?.()}
 			{:then gltf}
+				${hasSkinnedMeshes ? '{@const clonedNodes = cloneScene(gltf.scene)}' : ''}
 				${scene}
 			{:catch err}
         {@render error?.({ error: err })}

package/src/utils/transform.js

@@ -83,7 +83,7 @@ export async function transform(file, output, config = {}) {
         encoder: sharp,
         pattern: new RegExp(`^(?=${config.degrade}).*$`),
         targetFormat: config.format,
-        resize: [degradeResolution, degradeResolution]
+        resize: [config.degraderesolution ?? 512, config.degraderesolution ?? 512]
       }),
       textureCompress({
         encoder: sharp,