Partner Integration Guide

Integrate Monocle 3D System into your website with our powerful components and APIs. Display 3D models, enable model selection, and provide immersive AR experiences for your users.

Viewer Demo Picker Demo Bundle API

Monocle Component Integration Guides

Complete integration guides for both Monocle components

Monocle Viewer

Integration Guide

Display 3D models with WebGL rendering and AR support

Features:

WebGL/Three.js rendering
AR support (iOS/Android)
Interactive controls
Customizable appearance
Auto-rotation options

viewer.js: Lightweight viewer (~500KB)

HTML

<!-- Include the Monocle Viewer -->
<script type="module" src="https://components.monocle3d.com/viewer.js"></script>

<!-- Display a 3D model -->
<monocle-viewer2
  bundle-id="WnU8Mc2dzGPR45ER0Vo2"
  hide-logo
  enable-rotation
  rotation-per-second="-5deg"
  ar-actual-size
  enable-interaction-prompt
  interaction-prompt-style="wiggle">
</monocle-viewer2>

Monocle Picker

Integration Guide

Allow users to select from their 3D model library

Note: Using Monocle Picker requires you to have a Monocle3D account. Clicking the link above will redirect you to gallery.monocle3d.com to sign in or create a new account.

Features:

User model library access
Multi-language support
Event-driven selection
Form integration
Account linking guidance

picker.js: Full functionality (~800KB)

HTML

<!-- Include the Monocle Picker -->
<script type="module" src="https://components.monocle3d.com/picker.js"></script>

<!-- Model picker form -->
<form>
  <monocle-picker
    language="en-US"
    partner-id="your-partner-id"
    user-token="USER_TOKEN_FROM_API">
  </monocle-picker>
</form>

Resources & Support

Additional resources to help with your integration

Discord Community

Join our Discord community to connect with other developers, ask questions, and get help with your integration.

Join Discord

Support

Get direct help with integration issues, request new features, or contact our support team.

Email Support