unplugin-3d-object

unplugin-3d-object

Load whole 3d object while importing .obj files.

Install

npm i unplugin-3d-object
# or
yarn add unplugin-3d-object
# or
pnpm i unplugin-3d-object

Vite

// vite.config.ts
import loader3dObject from 'unplugin-3d-object/vite'

export default defineConfig({
  plugins: [
    loader3dObject({ /* options */ }),
  ],
})

Example: playground/

Rollup

// rollup.config.js
import loader3dObject from 'unplugin-3d-object/rollup'

export default {
  plugins: [
    loader3dObject({ /* options */ }),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-3d-object/webpack')({ /* options */ })
  ]
}

Nuxt

// nuxt.config.js
export default {
  buildModules: [
    ['unplugin-3d-object/nuxt', { /* options */ }],
  ],
}

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-3d-object/webpack')({ /* options */ }),
    ],
  },
}

How it works?

Plugin load .obj, scan for mtl libs and trying to load them. From mtl plugin also trying to load textures. Plugin transform .obj files to OBJ type.

Example

import house from 'house/house.obj'
// ...
createObject(house.obj, house.mtl.toString(), house.mtl.paths)

Example with three.js

import house from 'house/house.obj?three'
// ...
scene.add(house)

Example: playground

Warnings

If .obj file require texture or mtl file that can not be found it will throw warning.

Make sure change absolute paths to relative in .obj and .mtl

You can turn off warnings by passing warnings: false in plugin options if you don't care about missing assets.