---
title: "Theme-Aware 3D Model — Free Framer component · Best of Framer"
description: "Free Framer component · by Blue Jackson · Interactive. Theme-aware (light & dark mode"
canonical: "https://framer.elliotli.dev/component/theme-aware-3d-model"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Theme-Aware 3D Model

# Theme-Aware 3D Model

Theme-aware (light & dark mode)

[View on Framer](https://framer.com/marketplace/components/theme-aware-3d-model/?via=elliot-li)

![Theme-Aware 3D Model preview image 1](https://framer.elliotli.dev/og/component/theme-aware-3d-model/e11ad392a05da2bf/1600x1200.jpg)

## Summary

Theme-aware (light & dark mode

## Description

## Properties & Features

### ✓ 3D Model Upload

Supports .glb, .gltf, and .usdz formats, allowing you to import and display custom 3D assets directly in the component.

### ✓ Interactive Controls

Users can rotate, pan, and zoom the model using mouse or touch gestures for a fully interactive viewing experience.

### ✓ Camera & Orbit Controls

Adjust camera orbit, field of view, and zoom limits to control how the model is framed and explored.

### ✓ Material Customization

Override model materials with adjustable color tint, roughness, and metallic material for quick visual styling.

### ✓ Auto-Rotation

Enable automated model rotation with configurable speed, delay, and axis direction for animated presentations.

### ✓ Lighting & Shadow Controls

Fine-tune exposure, shadow intensity, and softness to improve depth and visual realism.

### ✓ Background Styling

Use a solid color or image background to integrate the model viewer seamlessly into your layout.

### ✓ AR Support

Enable augmented reality viewing on supported devices using WebXR, Scene Viewer, or Quick Look.

### ✓ Loading State

Optional loading overlay with customizable text and typography while the model initializes.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-sg4ear29-ytIdJbrkuifwOAPnTJ1E2uKSxfHRue)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-sg4ear29-AukiNf5vrJZXMn8IXoWBBCCuqN9LWS)

### Questions & Support

Need help? Feel free to reach out anytime — I'm here to assist you!

[Get in Touch ↗](https://www.jacksonvisualdesign.com/links)

## Rank history [How rankings work →](/terms#rankings)

-   All · #847

## Details

- **Author**: Blue Jackson
- **Published**: 2026-04-09
- **Updated**: 2026-04-09
- **Added**: 2026-03-08
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step