Import .obj files as strings 🧵 in Vite, Rollup, Webpack + more
npm install unplugin-obj
An .obj file import plugin for Vite, Rollup, and Webpack; built with unplugin. This gives you a sweet and simple way to import an .obj file as a string to, for example, parse into a mesh in something like three.js, or do whatever you want with.
Here's a simple example which imports an .obj file as a string then logs it to the console.
``ts
import obj from './models/Lowpoly_tree_sample.obj';
console.log(obj);
// ...optionally parse the obj 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
`bash`
pnpm i -D unplugin-obj
The most generally compatible way to add type definitions for .obj modules is via a tsconfig.json file.
`json`
// tsconfig.json
{
"compilerOptions:": {
...
"types": ["unplugin-obj/obj"]
}
}
`ts
// vite.config.ts
import ObjFileImport from 'unplugin-obj/vite';
export default defineConfig({
plugins: [ObjFileImport()],
});
`
Optional method to add types w/o tsconfig:
`ts`
// vite-env.d.ts
///
Example: playground/
`ts
// rollup.config.js
import ObjFileImport from 'unplugin-obj/rollup';
export default {
plugins: [ObjFileImport()],
};
`
`ts`
// webpack.config.js
module.exports = {
/ ... /
plugins: [require('unplugin-obj/webpack')()],
};
`ts
// svelte.config.js
/ ... /
import ObjFileImport from 'unplugin-obj/vite';
/* @type {import('@sveltejs/kit').Config} /
const config = {
/ ... /
kit: {
/ ... /
vite: {
/ ... /
plugins: [ObjFileImport()],
},
},
};
export default config;
`
`ts`
// nuxt.config.js
export default {
buildModules: [['unplugin-obj/nuxt']],
};
> This module works for both Nuxt 2 and Nuxt Vite
`ts``
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [require('unplugin-obj/webpack')()],
},
};