Three.js glTF loader and exporter have plugin system to provide extensibility mechanism to users. glTF extensions can be handled with the plugin system.
Some plugins for major and stable extensions are built-in in the loader and exporter. But other extensions are not supported as built-in by them (yet) because for example the specification is not great fit to Three.js API or structure, or the specification is not finalized.
If you want to use such extensions you need to write plugins by yourself but it requires the knowledge of glTF specification, extensions specification, Three.js core API, or Three.js glTF loader/exporter API. It can be difficult for some users.
This project provides you Three.js glTF loader/extension plugins even for such extensions. You no longer need to write the plugin on your own.
Depends on the plguins. Refer to each plugin's readme.
GLTFLoader plugins
// Import Three.js
<script type="importmap">
{
"imports": {
"three": "path_to_three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import {GLTFLoader} from 'path_to_GLTFLoader.js';
// Import three-gltf-extensions loader plugins
import GLTFFooExtension from 'path_to_three-gltf-extensions/loaders/Foo_extension/Foo_extension.js';
// Register the plugin to the loader and then load glTF
const loader = new GLTFLoader();
loader.register(parser => new GLTFFooExtension(parser));
loader.load(path_to_gltf_asset, gltf => {
...
});
</script>
GLTFExporter plugins
// Import Three.js
<script type="importmap">
{
"imports": {
"three": "path_to_three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import {GLTFExporter} from 'path_to_GLTFExporter.js';
// Import three-gltf-extensions exporter plugins
import GLTFExporterFooExtension from 'path_to_three-gltf-extensions/exporters/Foo_extension/Foo_extension_exporter.js';
// Register the plugin to the exporter and then export Three.js objects
const exporter = new GLTFExporter();
exporter.register(writer => new GLTFExporterFooExtension(writer));
exporter.parse(scene, result => {
...
});
</script>
Refer to each plugin's README for more detail.
$ npm install
$ npm start
# Access http://localhost:8080/examples/index.html
$ npm install
$ npm run test-install
$ npm run test-build
$ npm start
# Access http://localhost:8080/test/index.html
$ npm run test-install
$ npm run test
Note that the unit tests which rely on Web don't run. I recommend to run the unit tests on Web browser.
As written above, some extensions are not great fit to Three.js API or structure. So the plugins for them may have some limitations. If they don't cover your use case, please fork the repository and customize on your end.