# gltf-loader-2

> A webpack loader for .gltf files, should automatically bundles all referenced files.

Latest version **0.0.3** (published 2018-05-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install gltf-loader-2
pnpm add gltf-loader-2
yarn add gltf-loader-2
bun add gltf-loader-2
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2018-05-15 |
| First published | 2018-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Daniele Pelagatti |
| Maintainers | daniele-pelagatti |
| Keywords | gltf, webgl, webpack, loader |

## Links

- npm: https://www.npmjs.com/package/gltf-loader-2
- Repository: github.com/MONOGRID/gltf-loader-2
- Homepage: https://github.com/MONOGRID/gltf-loader-2
- Issues: https://github.com/MONOGRID/gltf-loader-2/issues
- npm.io page: https://npm.io/package/gltf-loader-2

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2018-05-15
- 0.0.2 — 2018-05-10
- 0.0.1 — 2018-05-10

## README

# Webpack GLTF loader 2

A webpack loader for ``.gltf`` files, should automatically bundles all referenced files.

Based on the work by [Magnus Bergman](https://github.com/magnus-bergman) but rewritten almost from scratch.

https://www.npmjs.com/package/gltf-loader this is his original loader that didn't work for me when I tried so I decided to rewrite it.

(it also doesn't have a valid github repository to contribute to, as of today, 10/05/2018)

**WARNING: this is pretty much untested and alpha version, contrubutions appreciated**

## Webpack configuration 

``` js
rules: [
  // IMPORTANT: if you have a loader for Image files (you would, normally)
  // you NEED to add an exclude option IN IT for GLTF images
  {
    // following is an example of YOUR loader config
    test: /\.(png|jpe?g|gif)(\?.*)?$/,
    // here I decided to put all my gltf files under a folder named 'gltf'
    // so I added and exclude rule to my existing loader
    exclude: /gltf/, // only add this line
    // (etc)
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: 'img/[name].[hash:7].[ext]'
    }
  },
  // GLTF configuration: add this to rules
  {
    // match all .gltf files
    test: /\.(gltf)$/,
    loader: 'gltf-loader-2'
  },
  {
    // here I match only IMAGE and BIN files under the gltf folder
    test: /gltf.*\.(bin|png|jpe?g|gif)$/,
    // or use url-loader if you would like to embed images in the source gltf
    loader: 'file-loader',
    options: {
      // output folder for bin and image files, configure as needed
      name: 'gltf/[name].[hash:7].[ext]'
    }
  }
  // end GLTF configuration
]
```

## Usage Example in Three.js

 ``` js
 // please notice the file and all its dependencies 
 // are under a folder named 'gltf' as per webpack config
import gltfFile from 'assets/gltf/some.gltf';
// per configuration only the GLTF json het embedded in the source
// .bin and .png images are processed and outputted by webpack

var loader = new GLTFLoader()
loader.parse(shieldGLTF, '', (gltf) => {
  // here we go
  let scene = gltf.scene
})
 ```

---
_Source: https://npm.io/package/gltf-loader-2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._