Skip to content
This is a gltf webpack loader, tested on three.js
JavaScript
Branch: master
Clone or download
Pull request Compare This branch is even with mientjan:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
README.md
package-lock.json
package.json

README.md

gltf-webpack-loader

This is a gltf webpack loader, tested on three.js. Automatically bundles all referenced files.

This loader will resolve all the files referenced in the .gltf file and change their urls depending on the loaders you have defined for these files. Files defined in the .gltf file must be relative to the .gltf file.

This loader still does not work with the public path. We dont have a idea how to solve that.

Install

npm install gltf-webpack-loader -S
yarn add gltf-webpack-loader

Usage

Webpack

const config = {
    module:{
      rules:[
        {
          test: /\.(gltf)$/,
          use: [
            {
              loader: "gltf-webpack-loader"
            }
          ]
        }
      ]
    },

    {
      test: /\.(bin)$/,
      use: [
        {
          loader: 'file-loader',
          options: {}
        }
      ]
    }
}

Project

import * as THREE from 'three';
import GLTFLoader from 'three-gltf-loader';

// file is being resolved by loader and a new url is returned.
import gltfPath from 'path/to/your/file.gltf';

const loader = new GLTFLoader();

// all files referenced in the gltf file have now also been resolved by your loaders.
loader.load(gltfPath, gltf => {
        // called when the resource is loaded
        scene.add( gltf.scene );
    },
    ( xhr ) => {
        // called while loading is progressing
        console.log( `${( xhr.loaded / xhr.total * 100 )}% loaded` );
    },
    ( error ) => {
        // called when loading has errors
        console.error( 'An error happened', error );
    },
);
You can’t perform that action at this time.