unplugin-mtl

An .mtl file import plugin for Vite, Rollup, and Webpack; built with unplugin. This gives you a sweet and simple way to import an .mtl file as a string to, for example, parse into a mesh in something like three.js, or do whatever you want with.

Credit to the inspiration from: unplugin-obj

Usage

Here's a simple example which imports an .mtl file as a string then logs it to the console.

import { mtl, extRef, extRefHelpers } from './models/Lowpoly_tree_sample.mtl';

console.log(mtl); // string of .mtl file contents w external files replaced with vite imported URL
console.log(extRef) // boolean: true if .mtl references external files
console.log(extRefHelpers) // array of objects: [{ src, width, height }]

// ...optionally parse the mtl file and create a mesh from it...

TypeSript & eslint may yell at you for trying to import a module where one doesn't exist without this plugin, so you can ask it to stop using the above comments before the import

Install

pnpm i -D unplugin-mtl

Types

The most generally compatible way to add type definitions for .mtl modules is via a tsconfig.json file.

// tsconfig.json
{
  "compilerOptions": {
    ...
    "types": ["unplugin-mtl/mtl"]
  }
}

Vite

// vite.config.ts
import MtlFileImport from 'unplugin-mtl/vite';

export default defineConfig({
  plugins: [MtlFileImport()],
});

Optional method to add types w/o tsconfig:

// vite-env.d.ts
/// <reference types="unplugin-mtl/mtl" />

Example: playground/

Rollup

// rollup.config.js
import MtlileImport from 'unplugin-mtl/rollup';

export default {
  plugins: [MtlFileImport()],
};

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require('unplugin-mtl/webpack')()],
};

SvelteKit

// svelte.config.js
/* ... */
import MtlFileImport from 'unplugin-mtl/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  /* ... */
  kit: {
    /* ... */
    vite: {
      /* ... */
      plugins: [MtlFileImport()],
    },
  },
};

export default config;

Nuxt

// nuxt.config.js
export default {
  buildModules: [['unplugin-mtl/nuxt']],
};

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [require('unplugin-mtl/webpack')()],
  },
};