Displaying 3D models with Vue

IntroductionSection titled Introduction

As part of a university course, I created a 3D model of an An-26 airplane. Of course, I was looking for a way to showcase my work, but the large file size was making things trickier than expected.

I eventually discovered Marmoset Toolbag and its JavaScript library Marmoset Viewer for embedding models in websites. The free trial would allow me to export my model to the proprietary format, but I quickly discovered that the JavaScript library was not available on NPM.

At the time, my website was built using Vue. So, after requesting consent from Marmoset, I created the NPM package vue-marmoset-viewer. It dynamically (and lazily) loads the Marmoset Viewer script, handles the lifecycle of viewer instances and provides reactive properties. Should manual access to the Marmoset Viewer script be required, it also provides a helper function for accessing the loaded instance.

Below is an example usage of the Vue component, showing my model.

UsageSection titled Usage

First, install the dependency using your preferred package manager.

pnpm add vue-marmoset-viewer

Note: Use v1 for Vue 2. v2 and onward only support Vue 3.

Using the component is straightforward, thanks to its reactive props. For example, the example used in this post looks as follows:

<script setup lang="ts">
import { MarmosetViewer } from 'vue-marmoset-viewer'
</script>

<template>
  <MarmosetViewer src="/static/files/models/an-26.mview" responsive />
</template>

By setting responsive, the component resizes to fit its parent automatically. The optional height and width props can be used to fix the respective dimensions size. Further, the component can be configured to start the viewer as soon as it’s loaded, by passing the auto-start prop.

ConclusionSection titled Conclusion

The Marmoset Viewer is a great tool for embedding high-quality 3D models in websites. Unfortunately, its JavaScript library can be cumbersome to use, as it’s not available on NPM. Through this library, using the Marmoset Viewer with Vue websites (or Astro, like this blog!) is a lot simpler.

Below is a high-res version of my plane model. Load it at your own discretion, it comes in at almost 36 MB!