@@ -13,9 +13,23 @@ function parse(gltf, { fileName = 'model', ...options } = {}) {
13
13
const animations = gltf . animations
14
14
const hasAnimations = animations . length > 0
15
15
16
+ /** @type {Record<string, Object3D[]> */
17
+ const slots = { }
18
+
16
19
// Collect all objects
17
20
const objects = [ ]
18
- gltf . scene . traverse ( ( child ) => objects . push ( child ) )
21
+ gltf . scene . traverse ( ( child ) => {
22
+ objects . push ( child ) ;
23
+
24
+ // Collect slots
25
+ const slot = child . userData ?. prop ;
26
+ const hasSlot = ( slot && typeof slot === "string" && slot . length > 0 ) ;
27
+ if ( hasSlot )
28
+ {
29
+ const slotname = sanitizeSlotName ( slot ) ;
30
+ slots [ slotname ] ? slots [ slotname ] . push ( child ) : ( slots [ slotname ] = [ child ] ) ;
31
+ }
32
+ } )
19
33
20
34
// Browse for duplicates
21
35
const duplicates = {
@@ -75,6 +89,11 @@ function parse(gltf, { fileName = 'model', ...options } = {}) {
75
89
return isVarName ( name ) ? `.${ name } ` : `['${ name } ']`
76
90
}
77
91
92
+ /** Ensure that a slot is a valid variable name e.g. must not contain spaces */
93
+ function sanitizeSlotName ( slotname ) {
94
+ return slotname . replaceAll ( / [ ^ a - z A - Z 0 - 9 ] / g, '' ) ;
95
+ }
96
+
78
97
const rNbr = ( number ) => {
79
98
return parseFloat ( number . toFixed ( Math . round ( options . precision || 2 ) ) )
80
99
}
@@ -219,17 +238,18 @@ function parse(gltf, { fileName = 'model', ...options } = {}) {
219
238
duplicates . geometries [ obj . geometry . uuid + obj . material . name ] &&
220
239
duplicates . geometries [ obj . geometry . uuid + obj . material . name ] . count > ( options . instanceall ? 0 : 1 )
221
240
let animated = gltf . animations && gltf . animations . length > 0
222
- return { type, node, instanced, animated }
241
+ const hasSlots = obj . userData ?. prop && typeof obj . userData . prop === "string" && obj . userData . prop . length > 0 ;
242
+ return { type, node, instanced, animated, hasSlots }
223
243
}
224
244
225
245
function equalOrNegated ( a , b ) {
226
246
return ( a . x === b . x || a . x === - b . x ) && ( a . y === b . y || a . y === - b . y ) && ( a . z === b . z || a . z === - b . z )
227
247
}
228
248
229
249
function prune ( obj , children , result , oldResult , silent ) {
230
- let { type, animated } = getInfo ( obj )
250
+ let { type, animated, hasSlots } = getInfo ( obj )
231
251
// Prune ...
232
- if ( ! obj . __removed && ! options . keepgroups && ! animated && ( type === 'group' || type === 'scene' ) ) {
252
+ if ( ! obj . __removed && ! options . keepgroups && ! animated && ! hasSlots && ( type === 'group' || type === 'scene' ) ) {
233
253
/** Empty or no-property groups
234
254
* <group>
235
255
* <mesh geometry={nodes.foo} material={materials.bar} />
@@ -370,13 +390,24 @@ function parse(gltf, { fileName = 'model', ...options } = {}) {
370
390
// Bail out if the object was pruned
371
391
if ( pruned !== undefined ) return pruned
372
392
373
- // Close tag
374
- result += `${ children . length ? '>' : '/>' } \n`
393
+ // Add custom slots if defined in the object's userData
394
+ // E.g. userData: { "prop" : "mySlot" } becomes `{ mySlot }`
395
+ const slot = obj . userData ?. prop ;
396
+ const hasSlot = ( slot && typeof slot === "string" && slot . length > 0 ) ;
397
+ const hasContent = children . length || hasSlot ;
375
398
376
- // Add children and return
377
- if ( children . length ) {
378
- if ( type === 'bone' ) result += children + `</primitive>`
379
- else result += children + `</${ type } >`
399
+
400
+ // Close tag if no children
401
+ result += `${ hasContent ? '>' : '/>' } \n`
402
+
403
+ // Add children
404
+ if ( children . length ) result += `${ children . trimEnd ( "\n" ) } \n`
405
+ // Add custom slot
406
+ if ( hasSlot ) result += `{${ sanitizeSlotName ( slot ) } }\n` ;
407
+ // Close tag
408
+ if ( hasContent ) {
409
+ if ( type === 'bone' ) result += `</primitive>`
410
+ else result += `</${ type } >`
380
411
}
381
412
return result
382
413
}
@@ -440,10 +471,14 @@ function parse(gltf, { fileName = 'model', ...options } = {}) {
440
471
} catch ( e ) {
441
472
console . log ( 'Error while parsing glTF' , e )
442
473
}
474
+
475
+ const slotParams = Object . keys ( slots ) . length > 0 ? ( Object . keys ( slots ) . join ( ", " ) + ", " ) : "" ;
476
+
443
477
const header = `/*
444
478
${ options . header ? options . header : 'Auto-generated by: https://github.com/pmndrs/gltfjsx' } ${
445
479
options . size ? `\nFiles: ${ options . size } ` : ''
446
480
}
481
+
447
482
${ parseExtras ( gltf . parser . json . asset && gltf . parser . json . asset . extras ) } */`
448
483
const hasPrimitives = scene . includes ( '<primitive' )
449
484
const result = `${ options . types ? `\nimport * as THREE from 'three'` : '' }
@@ -465,7 +500,7 @@ ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}*/`
465
500
? `
466
501
const context = React.createContext(${ options . types ? '{} as ContextType' : '' } )
467
502
468
- export function Instances({ children, ...props }${ options . types ? ': JSX.IntrinsicElements["group"]' : '' } ) {
503
+ export function Instances({ children, ${ slotParams } ...props }${ options . types ? ': JSX.IntrinsicElements["group"]' : '' } ) {
469
504
const { nodes } = useGLTF('${ url } '${ options . draco ? `, ${ JSON . stringify ( options . draco ) } ` : '' } )${
470
505
options . types ? ' as GLTFResult' : ''
471
506
}
@@ -486,7 +521,7 @@ ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}*/`
486
521
: ''
487
522
}
488
523
489
- export ${ options . exportdefault ? 'default' : '' } function Model(props${
524
+ export ${ options . exportdefault ? 'default' : '' } function Model({ ${ slotParams } ... props } ${
490
525
options . types ? ": JSX.IntrinsicElements['group']" : ''
491
526
} ) {
492
527
${ hasInstances ? 'const instances = React.useContext(context);' : '' } ${
0 commit comments