The approach
A transparent scene can make a 3D object feel like part of the page rather than a separate rectangular player. The final result depends on the scene background, the exported viewer and the host container. Test those layers independently when a solid box still appears.
Distinguish the background from the material
A transparent background removes the surrounding scene color; it does not make the object itself glass. Orbital exposes scene background controls separately from object materials. First choose the intended page color, then check whether the object and its shadows remain legible against it.
Inspect every surrounding layer
A scene can be transparent while its iframe or wrapper still has an opaque background. Review the generated export settings and the destination site’s container styles. Reflections and transmissive surfaces also change how the object reads, so inspect both light and dark page treatments if your website supports them.
A workflow to start with
Set the page background you intend to use in production.
Adjust the scene background separately from the object’s materials.
Preview the exported viewer inside a simple test container.
Inspect shadows, reflections and wrapper styles on light and dark surfaces.
Start with a specific request.
Compose this object for a transparent page background. Preserve the object’s opaque materials, use a clear silhouette and avoid a large floor plane that looks like a rectangular card. Review the result against both a light and a dark page.
Use this as a brief for scene work or AI assistance. Inspect the result in the editor; available AI tools depend on your account and plan.Before you publish
- There is no unwanted color on the host wrapper.
- The silhouette remains readable against nearby sections.
- Shadows and glass do not create surprising edges on a contrasting background.
Common questions
Is transparent background the same as glass?
No. Background transparency controls what surrounds the scene. Glass is a material property on the object.
Why do I still see a rectangle?
Inspect the scene setting, exported player and host container separately. An opaque wrapper can remain even when the scene background is transparent.
Further reading
Platform references for the surrounding workflow. Check destination-platform settings when publishing.
Three.js: rendering and material examples