> 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

<figure><img src="/files/wDnVICf30zvDO86TNUQt" 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="/files/ilZqPvckW1pN6IJRp8xe" 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="/pages/eyGiB4SQbJAMVzcNPvUt">Actions</a></td><td>Customize design options based on selected state</td></tr><tr><td><a href="/pages/BheF6X6VQoJrXEN4FkdC">Position</a></td><td>Set the position of the selected component in relation to the canvas</td></tr><tr><td><a href="/pages/aE87CjgghWwZkdeD5MWb">Size</a></td><td>Set the width and height properties of the selected component</td></tr><tr><td><a href="/pages/ZNo1xwslxKGyljLwnMpK">Layout</a></td><td>Set the layout of the selected component</td></tr><tr><td><a href="/pages/Zze4ygjNoS98mApauQWg">Background</a></td><td>Set the background properties of the selected component</td></tr><tr><td><a href="/pages/KiEwJmWK6V0sjGSTnKg4">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>