@vxna/gltf-loader

An opinionated webpack loader for glTF files and it's resources.

Warning

1. Usage with file-loader@>=5.0.0 requires esModule: false option.

2. This loader emit warning on glTF files with Data URI resources because they are less efficient. If you want self-contained files, consider GLB file format instead and use it with file-loader only.

Options

Name	Type	Default	Description
inline	{Boolean}	false	Inline glTF into bundle
pretty	{Boolean}	false	Make glTF human readable

Live code example

Visit this CodeSandbox for the full-featured example that you can download or play online.

Usage with file-loader@>=5.0.0

Inline glTF into bundle (geometry/textures are external):

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.gltf$/,
        loader: '@vxna/gltf-loader',
        options: { inline: true },
      },
      {
        test: /\.(bin|jpe?g|png)$/,
        loader: 'file-loader',
        options: { esModule: false },
      },
    ],
  },
}

Output glTF file (geometry/textures are external):

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.gltf$/,
        use: [
          {
            loader: 'file-loader',
            options: { esModule: false },
          },
          '@vxna/gltf-loader',
        ],
      },
      {
        test: /\.(bin|jpe?g|png)$/,
        loader: 'file-loader',
        options: { esModule: false },
      },
    ],
  },
}

Credits

Based on webmanifest-loader

License

MIT