JavaScript

Use a Package Manager

Install

pnpm add @neurodyn/model-viewer

npm install @neurodyn/model-viewer

yarn add @neurodyn/model-viewer

bun add @neurodyn/model-viewer

Create a Trigger

Model Viewer reads configuration from data attributes on the element you bind. The same markup can be used with the package manager, global, and embed integrations.

<button
  data-neurodyn-model-viewer-dialog
  data-neurodyn-model-viewer-tinuuid="..."
  data-neurodyn-model-viewer-api-key="..."
  data-neurodyn-model-viewer-hid="..."
>
  Open viewer
</button>

Initialize ModelViewerDialog:

import { ModelViewerDialog } from '@neurodyn/model-viewer'

const viewer = new ModelViewerDialog('[data-neurodyn-model-viewer-dialog]')

// Later, when the triggers are no longer needed:
// viewer.destroy()

You can use Model Viewer directly from a CDN without installing a package. Use the global build when you want to initialize triggers yourself, or the embed build when the script should initialize matching triggers automatically.

Global Build

The global build exposes ModelViewerDialog, so you can choose exactly which elements should open the dialog.

<script src="https://cdn.neurodyn.ai/@neurodyn/model-viewer/dist/model-viewer.global.min.js"></script>

Full example:

<button
  data-neurodyn-model-viewer-dialog
  data-neurodyn-model-viewer-tinuuid="..."
  data-neurodyn-model-viewer-hid="..."
>
  Open viewer
</button>

<script src="https://cdn.neurodyn.ai/@neurodyn/model-viewer/dist/model-viewer.global.min.js"></script>

<script>
  const viewer = new ModelViewerDialog('[data-neurodyn-model-viewer-dialog]')

  // Later, when the trigger is no longer needed:
  // viewer.destroy()
</script>

Embed Build

The embed build initializes itself and listens for clicks on elements with data-neurodyn-model-viewer-dialog.

<script defer src="https://cdn.neurodyn.ai/@neurodyn/model-viewer/dist/model-viewer.embed.min.js"></script>

<button
  data-neurodyn-model-viewer-dialog
  data-neurodyn-model-viewer-tinuuid="..."
  data-neurodyn-model-viewer-hid="..."
>
  Open viewer
</button>

Next steps

Read the JavaScript API reference.