A responsive and configurable Marmoset Viewer component for Vue

by Vue.js Examples

vue-marmoset-viewer

A responsive and configurable Marmoset Viewer component for Vue.

View Demo View Github

Features

  • ✨ Dynamic: Dynamically loads the Marmoset Viewer source code as soon as its required.
  • ? Responsive: Fully responsive. Supports touch controls.
  • ? Reactive: Reacts to property changes.
  • ⚒️ Manual access: If required, directly access the Marmoset script with provided type declarations.

Installation

# yarn
$ yarn add vue-marmoset-viewer

# npm
$ npm install vue-marmoset-viewer

Usage

import Vue from 'vue'
import MarmosetViewer from 'vue-marmoset-viewer'

Vue.use(MarmosetViewer)

<template>
  <marmoset-viewer src="/file.mview" :width="800" :height="600" :auto-start="true" />
</template>

or

<template>
  <marmoset-viewer src="/file.mview" responsive />
</template>

If responsive is set to true, the component will fill the available space of its parent.

Note: All properties of the component are reactive.

Events

  • load: Emitted when the underlying viewer is done loading.
  • unload: Emitted when an underlying viewer has been unloaded, because the component is destroyed or recreated.
  • resize: Emitted when the underlying viewer has been resized manually or automatically, when the responsive property is set to true.

Nuxt

  1. Create the file plugins/marmosetViewer.ts with the following content.
import Vue from 'vue'
import MarmosetViewer from 'vue-marmoset-viewer'

Vue.use(MarmosetViewer)
  1. Update the plugins array in nuxt.config.js.
export default {
  plugins: [
    { src: '~/plugins/marmosetViewer.ts' },
  ],
}

Manual usage

In addition to the component, this library also allows for direct access of the Marmoset script.
After the Promise returned by loadMarmoset() is resolved, the script can be accessed at document.marmoset.
While the required types are included in this library, keep in mind that this can only be done client-side, as it requires document to be available.

Options

The following options are available (taken from https://marmoset.co/posts/viewer-integration-guide/):

Type Name Default Description
number width 800 Width of viewer frame in points. This setting is ignored in full frame mode.
number height 600 Height of viewer frame in points. This setting is ignored in full frame mode.
boolean autoStart false Starts the viewer loading process immediately upon load (user does not have to press the play button). Leaving this disabled can save bandwidth and page load time.

In addition, the following options can be set when embedding a Marmoset viewer manually.

Type Name Default Description
boolean fullFrame false When enabled, stretches the viewer rectangle to fill the available frame (the containing window or iframe). This setting is ignored when the “pagePreset” option is enabled.
boolean pagePreset false When enabled, constructs a full standalone web page around the viewer, with a resizable frame. Useful for creating a simple, decent-looking presentation without having to construct a page yourself.
string thumbnailURL undefined If supplied, this image URL will be used for the load screen instead of the thumbnail extracted from the mview file. For best results, ensure that the given URL will not cause a cross-origin conflict.

Development

# install dependencies
$ yarn install

# build for production
$ yarn build

# lint project files
$ yarn lint

# serve demo
$ yarn demo:serve

# build demo for production
$ yarn demo:build