> For the complete documentation index, see [llms.txt](https://guide.swiftxr.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.swiftxr.io/components/3d-viewer.md).

# 3D Viewer

Add interactive 3D content to your applications

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2Fnvm5hNgkOb3UlXz3ZbCw%2FScreenshot%202024-07-13%20095217.png?alt=media&amp;token=514e904e-b64e-4581-a9db-3bdcaeb9bc79" alt=""><figcaption></figcaption></figure>

## Introduction

The 3D Viewer component in SwiftXR allows you to seamlessly display and interact with 3D models directly within your applications. This components supports a wide range of 3D file formats and provides intuitive controls for users to rotate, zoom, and pan models, offering a detailed exploration of 3D content. Additionally, the 3D Viewer offers customizable backgrounds and lighting options to enhance the visual presentation of your models.\
\
All components in SwiftXR are extended from the 3D Model Viewer.

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FKUx8Dg8yNiORbm3xyT0H%2FScreenshot%202024-07-13%20091846.png?alt=media&amp;token=c9141b39-d5bc-4feb-b49f-6a486ede075c" alt=""><figcaption></figcaption></figure>

## Design

<table data-full-width="true"><thead><tr><th width="161.5">Topic</th><th>Description</th></tr></thead><tbody><tr><td><a href="/components/3d-viewer/actions.md">Actions</a></td><td>Customize design options based on selected state</td></tr><tr><td><a href="/components/3d-viewer/postion.md">Position</a></td><td>Set the position of the selected component in relation to the canvas</td></tr><tr><td><a href="/components/3d-viewer/size.md">Size</a></td><td>Set the width and height properties of the selected component</td></tr><tr><td><a href="/components/3d-viewer/layout.md">Layout</a></td><td>Set the layout of the selected component</td></tr><tr><td><a href="/components/3d-viewer/background.md">Background</a></td><td>Set the background properties of the selected component</td></tr><tr><td><a href="/components/3d-viewer/effects.md">Effects</a></td><td>Add additional effects such as transitions to selected component</td></tr></tbody></table>

## Properties

<table data-full-width="true"><thead><tr><th>Topic</th><th>Description</th></tr></thead><tbody><tr><td>Upload 3D Object</td><td>Add 3D Object to be used</td></tr><tr><td>General Settings</td><td>Configure general user interaction and animation settings with the 3D model</td></tr><tr><td>3D Object Dimensions</td><td>Configure specified units of measurement for the 3D model</td></tr><tr><td>Customization Options</td><td>Configure multiple variants of a 3D model by changing the colour and textures of its assigned materials</td></tr><tr><td>Lighting Settings</td><td>Configure lighting and shadow settings. Additional option for custom HDR backgrounds for the 3D model</td></tr><tr><td>Camera Settings</td><td>Adjust camera field of view, zoom level, position and orientation.</td></tr><tr><td>Hotspot Labels</td><td>Add multiple labels o various parts of the 3D model</td></tr><tr><td>Advanced Settings</td><td>More options to customize user experience</td></tr></tbody></table>