unplugin-object-3d

Create ThreeJS object with one line of code

Install

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

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

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

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

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

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

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

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

Supported loader extensions

• .obj
• .glb and .gltf

How it works?

Plugin load .obj, scan for mtl libs and trying to load them. From mtl plugin also trying to load textures. Plugin return ThreeJS Object3d. For .glb and .gltf files plugin load them asynchronously and adds methods for animations.

Example

import house from 'house.obj?three'
import car from 'car.glb?three'
// ...
scene.add(house).add(car)
//...
const render = () => {
  requestAnimationFrame(render)
  // ...
  car.animate()
}

Example: playground

Plugin options

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

Concepts and extensions

For .glb and .gltf plugin uses Async3dObject. To keep your code clean async model can be added to scene. You can also listen to load event. It also adds animate method, so you can simply call it in render function.

scene.add(car)

const render = () => {
  car.animate()
}

car.addEventListener('loaded', () => { /* ... */ })

.obj loads synchronously.

Types

Make sure files.d.ts included in your tsconfig to have TS suggestion for imports.

{
  "include": ["node_modules/unplugin-3d-object/files.d.ts"],
  ...
}