This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    @thibka/multiloader

    1.0.6 • Public • Published

    Warning

    This package is no longer maintained and should not be used. New project here: three-multiloader

    Description

    The MultiLoader class controls textures, images and JSON files loading.

    Dependencies

    Depends on
    https://www.npmjs.com/package/three
    https://www.npmjs.com/package/three-obj-loader

    Usage

    import MultiLoader from '@thibka/multiloader';

    First create an object listing the assets you need to load.

    var files = {
        // Textures
        ground: {
            type: 'texture',
            path: 'path/to/file.jpg', // use require if webpack
            repeat: true // optional. Default is false. Set to true to use THREE.RepeatWrapping
        },
     
        // CubeTexture
        skybox: { type: 'cubeTexture', paths: [
            'path/to/file_1.jpg',
            'path/to/file_2.jpg',
            'path/to/file_3.jpg',
            'path/to/file_4.jpg',
            'path/to/file_5.jpg',
            'path/to/file_6.jpg',
        ] }, // use require if webpack
     
        // Images
        bird: { type: 'image', path: 'path/to/file.jpg' }, // use require if webpack
     
        // GLTF - ! gltf files must be in a single /gltf folder
        cat: { type: 'gltf', path: 'path/to/gltf/scene.gltf'},
     
        // OBJ
        dog: { type: 'obj', path: 'path/to/file.obj'}
    };

    Then use the Files object as a parameter when initializing the MultiLoader.

    MultiLoader.load({
        files: files,
        async: true, // optional. Default is true.
        onLoading: function(percent) {
            // 'percent' returns a value between 0 and 1 
        },
        onFinish: function() {
            // all assets loaded
        }
    });

    Files properties will then be accessible like so:

    • Textures
      • MultiLoader.files.ground.texture
    • CubeTextures
      • MultiLoader.files.skybox.cubeTexture
    • Images
      • MultiLoader.files.bird.image
    • GLTF
      • MultiLoader.files.cat.scene
    • OBJ
      • MultiLoader.files.dog.object

    GLTF

    Since GLTF models are made up of several files, they seem to be a bit more complicated to load. So these steps are to be followed.

    • Do not use require() when declaring the path in Files.js
    var files = {
        landscape: { type: 'gltf', path: '../../gltf/scene.gltf' },
    };
    • The webpack.config.js file needs to be modified this way:
      • exclude gltf from image loading
        {
            test: /\.(png|jpe?g|gif|mp3|woff|woff2|eot|ttf|otf|obj)$/,
            exclude: /gltf/,
            use: [
                'file-loader'
            ]
        }
    - then move the untouched /gltf folder in the build
    - and reference it this way:
    
    new CopyWebpackPlugin([
        {from: 'src/models/gltf', to: 'gltf'},
    ])

    Install

    npm i @thibka/multiloader

    DownloadsWeekly Downloads

    0

    Version

    1.0.6

    License

    ISC

    Unpacked Size

    74.7 kB

    Total Files

    4

    Last publish

    Collaborators

    • thibka