# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guide.swiftxr.io/components/3d-viewer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.