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.
- Provide reusablity and easiness to use even for the the extensions the spec of which isn't great fit to Three.js API or structure
- Allow early trial of glTF extensions the spec of which is not finalized yet
- Send feedback to Three.js glTF loader/exporter plugin system APIs
- KHR_materials_variants
- EXT_mesh_gpu_instancing
- EXT_text (Loader only)
- EXT_texture_video (Loader only)
- MSFT_lod (Loader only, in progress)
- MSFT_texture_dds (Loader only)
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 testNote 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent