Orbital Documentation

1. Introduction

Welcome to the Orbital 3D Viewer Generator! This tool is a comprehensive, no-code solution for creating and customizing interactive 3D web experiences. It empowers designers, marketers, and developers to build everything from simple product spinners to complex, scroll-driven animated scenes.

The final output is a self-contained HTML/CSS/JavaScript snippet that you can paste into any website, web builder, or project.

2. Getting Started

2.1 The Dashboard

When you first open the app, you are greeted by the Dashboard. This is your project hub.

• Projects Grid: Displays all your saved projects, sorted by the most recently modified.
• New Project: Click the + New Project card to start a new creation. You will be prompted to give your project a name.
• Deleting a Project: Hover over a project card and click the trash can icon to permanently delete it.

2.2 The Editor Interface

Opening a project takes you to the Editor. The interface is split into two main sections:

• Controls Panel (Right): This is where you will find all the settings to customize your 3D scene. The controls are organized into logical accordion sections.
• Live Preview (Left): This panel shows a real-time, fully interactive preview of your 3D viewer as you make changes.

3. Feature Breakdown: The Controls Panel

The Controls Panel is organized into collapsible sections. Let's explore each one.

3.1 Scene & Content

This section controls the fundamental building blocks of your viewer: the models, the background, and the surrounding layout.

3D Models:

• Add Model: Click + Add Model to add a new 3D object to your scene. You must provide a public URL to a .glb or .gltf file.
• Multiple Models: You can add several models to a single scene.
• Primary Model: The first model in the list is the "primary" model. Features like automated animations and the Scroll Timeline will target this model. You can drag and drop to reorder.

Scene Background:

• Color: Set a simple solid background color.
• Image: Use an image as a background by providing its URL. You can enable a Background Blur.
• Transparent: Makes the viewer's background transparent.
• Code: For advanced users, this allows you to paste in custom HTML and CSS to create dynamic backgrounds.

Layout & Content:

• Split Screen: Creates a two-column layout with the 3D viewer on one side and text content on the other.
• Full Screen: The 3D viewer takes up the entire container, with optional text overlays.

3.2 Art Direction

This section is for controlling the look and feel of your scene.

Interactive Helpers (Gizmo):

• Enable this to show a 3D gizmo in the Live Preview for visual manipulation.
• Use shortcuts: W (Move), E (Rotate), and R (Scale).

Lighting & Shadows:

• Presets: Choose from styles like "Studio," "Dramatic," or "Sunrise".
• Custom: Gives you full control over a three-point lighting system.

Framing & Composition:

• Active Model Settings: Fine-tune the selected model's Position, Rotation, Size, and Scroll FX.
• Initial Camera Settings: Define the camera's starting position. Use the "Use Current View" button to save your perspective from the live preview.

3.3 Post-Processing

These are cinematic, lens-like effects that can dramatically enhance the visual appeal.

• Bloom: Adds a beautiful glow effect to bright parts of your scene.
• Depth of Field (DOF): Simulates a camera lens by blurring the foreground and background.
• Vignette: Darkens the corners of the frame.

3.4 Interaction & Hotspots

Control how users can interact with your scene.

• Looping Animation: Set up a continuous passive animation like Model Rotate or Camera Orbit.
• Annotations & Hotspots: Add interactive "hotspots" to your model. When clicked, a label with a title and description appears.
• Cinematic Tours: Automatically plays through all your hotspots, creating a hands-free tour.
• User Controls: Option to Disable Drag Rotation and Disable User Zoom.

3.5 Scrolling & Timeline

Create complex animations that are controlled by the user scrolling down the page.

• Enable Scroll Timeline: Pins the 3D viewer and links its animation timeline to the page's scrollbar.
• Keyframes: Add keyframes to build your animation. Each keyframe saves a snapshot of the camera and model's state. The scene animates between these states as the user scrolls.

3.6 Render & Export

Fine-tune performance, quality, and the final output settings.

• Loading Behavior: Show a loading indicator or fade in.
• Performance & Quality: Control Anti-Aliasing, Render Quality, and Shadow Quality.
• Compression: Enable support for Draco and KTX2 if your model uses them.
• Container Dimensions: Set the final width and height of your viewer embed.

4. Exporting Your Project

Once you are happy, click the Export button. A popup will appear with the final code.

• Final Overrides: Change some interaction settings for the final exported version.
• Copy & Paste: Click Copy Code and paste the snippet into the <body> of your website.
• Local Models: If you used a local file, you must first upload it to a server and replace the placeholder URL with the public one.

5. Keyboard Shortcuts

• Ctrl/Cmd + Z: Undo
• Ctrl/Cmd + Y: Redo
• W: Gizmo Move Mode
• E: Gizmo Rotate Mode
• R: Gizmo Scale Mode
• Q or C: Toggle Interactive Helpers (Gizmo)
• D: Toggle Drag Rotation
• Z: Toggle User Zoom
• H: Toggle Light Helpers