How to add a 3D model

In TeleportHQ, the 3D Model element shows a 3D object that visitors can rotate and zoom, for example a product, a sculpture or a piece of furniture. Drag 3D Model from Elements → Primitives → Media onto your page (or click it). In 3D Model Settings in the right panel, click Browse 3D models to pick a free model, or use a GLB file you uploaded. Then choose rotation, lighting and zoom.

Before you start#

• Free models from the 3D tab work on every plan.
• Uploading your own GLB file needs a trial or a paid plan. See Which files can I upload, and how big can they be?
• 3D models are large files. Pick lighter models (fewer triangles) so your page loads fast.

1. Add the 3D Model element#

1. In the left sidebar, click Elements.
2. On the Primitives tab, scroll to the Media group.
3. Drag 3D Model onto the canvas, where the model should show. Or select a container and click 3D Model: it goes inside it.

2. Choose a model#

A free model:

1. With the 3D Model selected, in the right panel, find 3D Model Settings.
2. Click Browse 3D models. The Assets Manager opens on the 3D tab.

3. Choose a collection, for example Poly Haven or Smithsonian, and browse or search. Type at least 3 letters, for example chair.
4. With the 3D Model element still selected, click the button on the model's card. TeleportHQ copies the model into your project's files and shows it in the element.

Your own GLB file:

1. In the Assets Manager, open Uploads and upload the .glb file. See How to upload images, videos and files.
2. Select the 3D Model element on the canvas.
3. Right-click your file in the Assets Manager and choose Replace 3D Model.

3. Adjust how the model looks#

In 3D Model Settings:

• Camera Controls: lets visitors rotate and zoom the model on your site (drag to orbit, scroll to zoom).
• Auto-Rotate: slowly spins the model once it has loaded.
• AR: shows a "view in your space" augmented-reality button on supported phones.
• Exposure: brightness of the lighting. 1 is the default.
• Shadow Intensity: strength of the shadow under the model. 0 turns it off.
• Zoom (%): how close the camera is. 100 is the default; 200 is twice as close.
• Environment: the lighting style, Neutral (default) or Legacy.
• Alt Text: a short description for screen readers, for example Oak dining chair.

To set a still image shown while the model loads, select the element, then right-click an image in the Assets Manager and choose Replace Poster.

Check that it worked#

The model shows on the canvas. Select it to rotate it with the mouse and zoom with the scroll wheel; the zoom you set there is saved. To check Camera Controls and Auto-Rotate as visitors see them, preview your site.

Troubleshooting#

A limit window opens when you upload a GLB file Uploading your own 3D files needs a trial or a paid plan. Use a free model from the 3D tab, or upgrade your workspace. The window may have no title, and its text may read "undefined".

"The model exceeds your plan's storage limits." The model is bigger than the storage you have left. Pick a smaller model, or delete unused files. See How to rename or delete files.

"This model is not available under a commercial-friendly license." You can't use that model on a website. Choose another one.

"The 3D model provider is unavailable. Please try again later." The collection's website is down. Try another collection or come back later.

Good to know#

• Model cards show a size and a triangle count. "Triangles — how detailed the mesh is. More triangles means a heavier model to render."
• AI 3D Model in the AI group currently shows "AI 3D model generation is coming soon. In the meantime, browse free 3D models in the Assets Manager."
• Store products can show 3D models too. See How to add product photos and 3D models.
• More about the free model collections: How to use free 3D models, game sprites and sounds.