Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tonyketcham/unplugin-obj
Import .obj files as strings ๐งต in Vite, Rollup, Webpack + more
https://github.com/tonyketcham/unplugin-obj
nuxt obj-files obj-loader rollup svelte-cubed threejs unplugin vite webpack4 webpack5
Last synced: about 1 month ago
JSON representation
Import .obj files as strings ๐งต in Vite, Rollup, Webpack + more
- Host: GitHub
- URL: https://github.com/tonyketcham/unplugin-obj
- Owner: tonyketcham
- License: mit
- Created: 2021-12-02T03:52:04.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-01-02T08:05:12.000Z (almost 3 years ago)
- Last Synced: 2024-10-01T06:34:10.987Z (about 2 months ago)
- Topics: nuxt, obj-files, obj-loader, rollup, svelte-cubed, threejs, unplugin, vite, webpack4, webpack5
- Language: TypeScript
- Homepage:
- Size: 116 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-obj
[![NPM version](https://img.shields.io/npm/v/unplugin-obj?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-obj)
An [`.obj`](https://en.wikipedia.org/wiki/Wavefront_.obj_file) file import plugin for Vite, Rollup, and Webpack; built with [unplugin](https://github.com/unjs/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](https://threejs.org/), or do whatever you want with.
## Usage
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
## Install
```bash
pnpm i -D unplugin-obj
```## Types
The most generally compatible way to add type definitions for `.obj` modules is via a `tsconfig.json` file.
```js
// tsconfig.json
{
"compilerOptions": {
...
"types": ["unplugin-obj/obj"]
}
}
```### Vite
```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/`](./playground/)
### Rollup
```ts
// rollup.config.js
import ObjFileImport from 'unplugin-obj/rollup';export default {
plugins: [ObjFileImport()],
};
```### Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [require('unplugin-obj/webpack')()],
};
```### SvelteKit
```ts
// svelte.config.js
/* ... */
import ObjFileImport from 'unplugin-obj/vite';/** @type {import('@sveltejs/kit').Config} */
const config = {
/* ... */
kit: {
/* ... */
vite: {
/* ... */
plugins: [ObjFileImport()],
},
},
};export default config;
```### Nuxt
```ts
// nuxt.config.js
export default {
buildModules: [['unplugin-obj/nuxt']],
};
```> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
### Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [require('unplugin-obj/webpack')()],
},
};
```