Styling Web XR Button on Android

Hi! I’m trying to change the default WebXR Start button since the original doesn’t go well with white background. How can i access the button itself?
I tried changing the css without success.

On the same line, is it possible to do the same with the “open in quicklook” on IOs?

Original Post on Discord

by user 368204675922657280

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.

Help requested: please wait a moment…

Here is what I found for you :brain: Discord

Hello De! You can customize the WebXR start button by modifying it after it’s created. The WebXR class provides a static method createARButton to create the AR button and resetButtonStyles to reset any styles applied to it.

Here is how you can access the button and apply custom styles in TypeScript:

import { WebXR } from '@needle-tools/engine'; // or your path to WebXR

// After creating the WebXR component and calling createARButton
const xrComponent = new WebXR();
const arButton = WebXR.createARButton(xrComponent);

// You can now modify the arButton styles or attributes as you like = 'black'; // Example of changing button background color = 'white'; // Example of changing button text color
// ...other style changes or attributes

You should apply these changes either in the start method of one of your custom components or after the WebXR component has been instantiated and the AR button has been created.

Regarding the “open in quicklook” button on iOS, the customization approach would be similar. You may modify the button after it has been created, but keep in mind that this button may be specifically styled by the operating system, and you might be limited in what custom styles you can apply. If you need more help with the Quick Look button, please let me know, and I’ll search for more specific information.

Remember to apply changes only after the button has been created to ensure that your styles don’t get overwritten by defaults (see the documentation).

1 messages left GPT 4
Thanks for your feedback!

Yeap works!

by user 368204675922657280

Changed the channel name: Styling Web XR Button on Android

by user 368204675922657280

You can also take a look at this sample if you need even more customization then just setting the styles:
HTML Custom XR Buttons | Needle Engine?