twi5ted.js Viewer Documentation

Everything you need to build, preview, and deploy with twi5ted.js.

Start here for setup, workflows, exports, and troubleshooting.

Get productive fast

twi5ted.js is designed to help you visually configure a Google Model Viewer scene and export clean, deployable output.
You control the model, the snippet, and the hosting — twi5ted.js handles the boring setup work.

Tip: Keep this page bookmarked. It’s written for real-world workflows (WordPress, landing pages, product pages, and client demos).

Quick Start

Load a model (.glb recommended)
Adjust camera (initial orbit + target point)
Set lighting (environment, exposure, tone mapping)
Add hotspots (labels + optional actions)
Preview on mobile (QR testing flow)
Export (snippet, standalone HTML, or .tws scene file)

Models & Hosting

For best performance and fewer surprises, host your models on your own domain (example: /models/).
Use .glb for a single-file workflow and web-friendly delivery.

Optimize polycount and texture sizes
Prefer power-of-two textures (512, 1024, 2048)
Compress models when possible
Use HTTPS URLs for everything

Recommended naming

Keep filenames consistent so exports are predictable:

product_name_v1.glb
product_name_poster.webp
product_name.tws

Tip: Treat scenes like code — version them and keep old builds.

Workflow

1) Load / confirm model
Use the viewer to load the model by name (or upload if you’re working locally).

2) Set camera first
Get the framing right early. Then lock limits later if needed.

3) Dial in lighting
Choose an environment preset and tune exposure and tone mapping.

4) Add hotspots
Place callouts where users naturally look. Keep text short.

5) Export + embed
Paste snippets into WordPress/Divi or ship standalone demos.

Hotspots

Hotspots are clickable callouts anchored to your model. Each hotspot includes a label and optional on-click behavior.

Supported actions

Open link (optional “new tab”)
Scroll to anchor (example: #pricing)

Note: Hotspot click actions are most consistent in the standard web viewer. Native AR viewers may vary by platform.

Placement tips

Place hotspots on stable, visible surfaces
Avoid stacking hotspots in one area
Use clear labels (2–4 words works great)
Use anchors to tie 3D to long-form content sections

Targeting IDs

The editor shows the Hotspot ID (example: hotspot-3) so you always know which hotspot you’re configuring.

Best Practices

Start with camera framing before adding limits.
Use environment lighting for consistent results across devices.
Mobile test early using QR preview.
Keep interactions simple — links and anchors are reliable and user-friendly.

The Best Practices toggles let you include or exclude UI elements in your exported snippet (progress bar, AR button, AR prompt).

Camera

Camera orbit and target point define how your model is framed when the page loads.

Initial orbit uses yaw + pitch (plus distance in export)
Save current as initial captures your current camera state
Reset framing returns to a safe view
Target point controls what the camera looks at

Pro tip

If you want a “guided” experience, get your initial framing perfect, then apply limits after you’re happy with the view.

Limits are great for storytelling. Too-tight limits can make users feel stuck.

Limits

Use yaw/pitch limits and minimum zoom to keep the user experience focused.

Yaw limits: constrain left/right rotation
Pitch limits: constrain up/down tilt
Minimum zoom: prevent users from zooming too far in

Tip: Use “Set to current” buttons to quickly capture comfortable bounds while you’re viewing the model.

Lighting

Lighting in web viewers is heavily influenced by the environment image and tone mapping. Use presets and tune exposure for best results.

Environment image presets (Neutral, Legacy, Spirit Sunrise, etc.)
Exposure (0 → 2)
Shadow softness (0 → 1)
Tone mapping (Neutral, ACES, AgX)
Environment as skybox (optional)

Quick lighting checklist

If it looks dark: raise exposure or change environment
If it looks washed out: lower exposure or change tone mapping
If shadows look harsh: increase softness slightly

Export

Snippet

Portable <model-viewer> markup for any website/CMS. Best for production embeds.

Standalone HTML

Single-page export for demos, QA, approvals, and sharing.

.tws Scene

JSON-based save format that stores scene configuration so you can iterate later.

Tip: After exporting, keep the scene file alongside your model. It’s your “source of truth” for future edits.

WordPress + Divi

The easiest embed path is a Divi Code Module.

Add a Code Module where you want the viewer
Paste your exported snippet
Save and test (desktop + mobile)

If WordPress strips tags, verify you’re not pasting into a WYSIWYG Text module and that your role allows unfiltered HTML.

Anchors for scroll-to-section

In Divi, add a CSS ID to the target section/row/module:

Open the target element settings
Go to Advanced → CSS ID & Classes
Set CSS ID to something like pricing
Use #pricing in the hotspot anchor field

Troubleshooting

My model doesn’t load

Confirm the src path is correct and the file is publicly accessible
Check the browser console/network tab for 404 or CORS issues
Try a different browser/device to isolate platform behavior

My snippet works locally but not in WordPress

Use a Divi Code Module (not a WYSIWYG text module)
Ensure WordPress is not stripping tags for your user role
Confirm any caching/minification plugin isn’t rewriting scripts

Hotspot links/anchors don’t trigger

Set the hotspot action to Open link or Scroll to anchor
Verify the URL/anchor field is not empty
For anchors: confirm the element exists and the selector matches

Need help? Send us the exported snippet and a screenshot of your settings and we’ll diagnose it fast.

[et_pb_call_to_action title=”Ready to ship?” button_text=”Launch the Viewer” button_url=”/viewer/” background_layout=”light” text_orientation=”center” use_background_color=”on” background_color=”#ffffff” _i=”0″ _address=”13.0.0.0″ theme_builder_area=”post_content” /]