Load GLTF Model with Custom Values / Overwrite Extensions

Questions
,
1

Hi all,

I’m currently trying to develop my own 3D Viewer for GLTF files.

I’d like to include the following functionality: I want to extract custom properties from the model like for example light settings or camera positions that I can use to create a DirectionalLight instance. I found online that this can be done with extensions:

# myModel.gltf

"extensionsUsed": [
    "KHR_lights_punctual"
],
"extensions": {
    "KHR_lights_punctual": {
        "lights": [
            {
                "type": "directional",
                "intensity": 1
            }
        ]
    }
}

In addition, it should be possible to load custom values for such settings by using a configuration file (e.g. in JSON format), for example when I want to change the light’s intensity:

# config.json

"gltfExtensions": {
    "KHR_lights_punctual": {
        "lights": [
            {
                "type": "directional",
                "intensity": 10
            }
        ]
    }
}

So I’m looking for a way to override or disable any given extensions in the original GLTF once I load custom values. Is this possible at all? And if so are there any best practices? I’ve already tried to include them into the userData node, but this didn’t seem to work.

Thank you so much for any help!

2

You can just load the file manually as a JSON - modify it there - then use GLTFLoader.parse on that modified JSON to transform it into a model.

3

Thank you, do you mean something like this:

const loader = GLTFLoader()
const fileLoader = new FileLoader()
let modelJsonString = await fileLoader.loadAsync(assetUrl)
let modelJsonObject = JSON.parse(modelJsonString)
delete modelJsonObject.extensions
model = await loader.parse(modelJsonObject)

Unfortunately, this way, model is undefined :frowning: Or am I missing something?

4

parse does not return a Promise - awaiting it will just automatically return undefined. You can use third argument - onLoad - to listen for when the parsing is finished, it works similarly to onLoad in the load method.