3D Model Viewer Builder

Basic Settings

Advanced Settings

Accessibility

Model URL *

Supported formats: .glb, .gltf, .usdz, .obj, .mtl

Title

Description

Aspect Ratio

Custom Ratio

Width

Height

Environment Lighting

Skybox Image

Field of View: 45°

Minimum Zoom: 25%

Maximum Zoom: 200%

Rotation Speed: 30°/s

Auto Rotate

Shadow Intensity: 1

AR Button

USDZ File URL (for iOS AR)

Custom AR Button Label

Custom AR Prompt

Disable Zoom

Model Alt Text (for screen readers)

Accessibility (a11y) JSON

Tip: Enter a JSON object with keys for each view (e.g. front, back, left, right, upper-front, etc).
Example:

{"front": "The front of the 3D model.", "back": "The back of
                  the 3D model."}

This improves screen reader accessibility and can provide translations for different model views.

Copied to clipboard!

How to Use

Enter your 3D model URL in the Model URL field (required). Supported formats: .glb, .gltf, .usdz, .obj, .mtl
Optionally add a title and description.
Select your preferred aspect ratio or enter a custom one.
Adjust advanced settings: environment lighting, skybox, field of view, zoom, rotation, AR, shadow intensity, and more.
Switch to the Accessibility tab to add alt text and a11y JSON for screen readers.
Click "Generate Embed Code" to get your iframe code.
Copy the generated code and paste it into your website or LMS.
Use the live preview to see exactly how your embed will look and behave.

Test Model URL:
https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/main/2.0/Duck/glTF-Binary/Duck.glb

Tips for Best Results

Use .glb or .gltf for best performance and compatibility.
Keep model file sizes under 50MB for optimal loading.
Test the preview before embedding.
Consider mobile users when setting aspect ratio and controls.
Use the Accessibility tab to improve screen reader support.

Common Issues & Solutions

Model not loading?

Check if the URL is accessible and correct.
Verify the file format is supported.
Ensure the file size isn't too large.
Check if the server allows CORS.

AR not working?

Ensure you're using a supported device.
Check if the model format is compatible (glTF/GLB or USDZ).
Verify the model has proper scale and orientation.

Performance issues?

Optimize your 3D model (reduce polygon count).
Use compressed textures.
Consider using a CDN for faster loading.