Skip to content

Commit 6d727db

Browse files
committed
add support for generating slots from blender properties
1 parent 7cb8e67 commit 6d727db

File tree

1 file changed

+47
-12
lines changed

1 file changed

+47
-12
lines changed

src/utils/parser.js

+47-12
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,23 @@ function parse(gltf, { fileName = 'model', ...options } = {}) {
1313
const animations = gltf.animations
1414
const hasAnimations = animations.length > 0
1515

16+
/** @type {Record<string, Object3D[]> */
17+
const slots = {}
18+
1619
// Collect all objects
1720
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+
})
1933

2034
// Browse for duplicates
2135
const duplicates = {
@@ -75,6 +89,11 @@ function parse(gltf, { fileName = 'model', ...options } = {}) {
7589
return isVarName(name) ? `.${name}` : `['${name}']`
7690
}
7791

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-zA-Z0-9]/g, '');
95+
}
96+
7897
const rNbr = (number) => {
7998
return parseFloat(number.toFixed(Math.round(options.precision || 2)))
8099
}
@@ -219,17 +238,18 @@ function parse(gltf, { fileName = 'model', ...options } = {}) {
219238
duplicates.geometries[obj.geometry.uuid + obj.material.name] &&
220239
duplicates.geometries[obj.geometry.uuid + obj.material.name].count > (options.instanceall ? 0 : 1)
221240
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 }
223243
}
224244

225245
function equalOrNegated(a, b) {
226246
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)
227247
}
228248

229249
function prune(obj, children, result, oldResult, silent) {
230-
let { type, animated } = getInfo(obj)
250+
let { type, animated, hasSlots } = getInfo(obj)
231251
// Prune ...
232-
if (!obj.__removed && !options.keepgroups && !animated && (type === 'group' || type === 'scene')) {
252+
if (!obj.__removed && !options.keepgroups && !animated && !hasSlots && (type === 'group' || type === 'scene')) {
233253
/** Empty or no-property groups
234254
* <group>
235255
* <mesh geometry={nodes.foo} material={materials.bar} />
@@ -370,13 +390,24 @@ function parse(gltf, { fileName = 'model', ...options } = {}) {
370390
// Bail out if the object was pruned
371391
if (pruned !== undefined) return pruned
372392

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;
375398

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}>`
380411
}
381412
return result
382413
}
@@ -440,10 +471,14 @@ function parse(gltf, { fileName = 'model', ...options } = {}) {
440471
} catch (e) {
441472
console.log('Error while parsing glTF', e)
442473
}
474+
475+
const slotParams = Object.keys(slots).length > 0 ? (Object.keys(slots).join(", ") + ", ") : "";
476+
443477
const header = `/*
444478
${options.header ? options.header : 'Auto-generated by: https://github.com/pmndrs/gltfjsx'} ${
445479
options.size ? `\nFiles: ${options.size}` : ''
446480
}
481+
447482
${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}*/`
448483
const hasPrimitives = scene.includes('<primitive')
449484
const result = `${options.types ? `\nimport * as THREE from 'three'` : ''}
@@ -465,7 +500,7 @@ ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}*/`
465500
? `
466501
const context = React.createContext(${options.types ? '{} as ContextType' : ''})
467502
468-
export function Instances({ children, ...props }${options.types ? ': JSX.IntrinsicElements["group"]' : ''}) {
503+
export function Instances({ children, ${slotParams}...props }${options.types ? ': JSX.IntrinsicElements["group"]' : ''}) {
469504
const { nodes } = useGLTF('${url}'${options.draco ? `, ${JSON.stringify(options.draco)}` : ''})${
470505
options.types ? ' as GLTFResult' : ''
471506
}
@@ -486,7 +521,7 @@ ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}*/`
486521
: ''
487522
}
488523
489-
export ${options.exportdefault ? 'default' : ''} function Model(props${
524+
export ${options.exportdefault ? 'default' : ''} function Model({ ${slotParams}...props }${
490525
options.types ? ": JSX.IntrinsicElements['group']" : ''
491526
}) {
492527
${hasInstances ? 'const instances = React.useContext(context);' : ''} ${

0 commit comments

Comments
 (0)