@vxna/gltf-loader NPM

@vxna/gltf-loader

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

Warning

Usage with file-loader@>=5.0.0 requires esModule: false option.
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 }
      }
    ]
  }
}