Monocle Viewer Integration

Complete guide to implementing and configuring the Monocle Viewer component. Use the interactive demo below to explore all available options and generate ready-to-use code for your implementation.

Environment Selection

Choose your target environment for development and deployment

Release Candidate

Recommended for development and testing

https://components-rc.monocle3d.com

Production

Use for live applications

https://components.monocle3d.com

Interactive Configuration Demo

Configure the Monocle Viewer in real-time and see the generated code.

Configuration Options

Display Options

Wall Mounted

Optimize for wall-mounted AR placement

Field of View

Camera field of view angle

Interaction Options

Disable Zoom

Prevent users from zooming in/out

Enable Interaction Prompt

Show hints to guide user interaction

Prompt Style

Visual style of interaction hints

Animation Options

Enable Auto-Rotation

Automatically rotate the model

Rotation Speed

Speed and direction of auto-rotation

AR Options

AR Actual Size

Display model at real-world scale in AR

Generated HTML Code

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

<!-- Display a 3D model with your configuration -->
<monocle-viewer2
  bundle-id="WnU8Mc2dzGPR45ER0Vo2"
  enable-rotation
  enable-interaction-prompt>
</monocle-viewer2>

Live Preview

Basic Implementation Example

Here's a simple example to get you started:

Basic HTML Example

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

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

Property Documentation

Complete reference for all Monocle Viewer properties:

Property	Type	Description
`bundle-id`	String (Required)	The unique identifier for the 3D model bundle to display.
`wall-mounted`	Boolean	Optimizes the viewer for wall-mounted AR placement and restricts camera movement.
`enable-rotation`	Boolean	Enables automatic rotation of the 3D model.
`rotation-per-second`	String	Speed of auto-rotation (e.g., "-5deg" for counter-clockwise, "5deg" for clockwise).
`enable-interaction-prompt`	Boolean	Shows visual hints to guide user interaction with the model.
`interaction-prompt-style`	String	Style of interaction prompts: "wiggle" or "basic".
`disable-zoom`	Boolean	Prevents users from zooming in or out of the model.
`ar-actual-size`	Boolean	Displays the model at its real-world scale when viewed in AR mode.
`field-of-view`	String	Camera field of view angle (e.g., "45deg"). Affects how much of the scene is visible.