How to customise the quick look button?

When using the USDZ Exporter component, how can I customise the ‘Open in Quick Look’ button that appears at the bottom of the screen on iOS?

Original Post on Discord

by user 103054507105067008

It seems a similar question got stale last time :confused:

This is the code that creates the button.

It looks like there’s a css class called quicklook-ar-button that is being used.

For reference for others, this is a the solution how to override the button element:

Let me know @ROBYER1 if that was the name of the css class you’ve been looking for :slight_smile:

So I got further with this, I made my own version of the USDZExporter script here but I get the error undefined is not a function (near 'exporter.parse...' when I press the quick look button on iOS
CustomUSDZExporter.ts

by user 103054507105067008

That is how I hid the button programmatically, I can probably reverse engineer it to edit how the button looks

by user 103054507105067008

Hm, can’t find any meantion of the class :eyes: anywhere.

this.dispatchEvent(new CustomEvent("created-button", { detail: button }))

This line is intersting, so you are able to liste on USDZ Exporter for created-button and handle the button from that :+1: No need to querry it manually at least.

uph, the USDZ Exporter is not exposed. You can’t exactly clone it like you do, usually it just cases more issues which you can’t solve.

~~But since it is not exposed, you can’t listen to the dispatch i point out above :confused: ~~

And regardless, the workflow should be the same as for the other buttons, so it should be driven by a css class. Marcel/Herbst will have to answer this one :cactus:

Hi @ROBYER1 yes what @kipash :cactus: proposed here would be the way to go right now.
You can either customize the button styles directly or inject a stylesheet in the same element/parent by listening to created-button on the USDZExporter component (myUsdzExporter.addEventListener(new CustomEvent("created-button", myEvt)))

The reason for why you can’t modify it via a global css script is that it’s inside the shadowDom which prevents styles from leaking in/out of the element. The plan is to make it easier to still style an element again without requiring code but that’s not done yet

UsdzExporter is exposed/exported in @needle-tools/engine @kipash :cactus:

My bad :+1: USDZExporter can be referenced and thus it is exposed.

import { USDZExporter } from "@needle-tools/engine";

You can also simply disable the built-in button (via the USDZExport component in Unity) and in your custom button click call GameObject.findObjectOfType(USDZExporter).exportAsync();

Thank you so much!

by user 103054507105067008