vue-marmoset-viewer

A responsive and configurable Marmoset Viewer component for Vue.

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

Create the file plugins/marmosetViewer.ts with the following content.

import Vue from ‘vue’
import MarmosetViewer from ‘vue-marmoset-viewer’

Vue.use(MarmosetViewer)

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