AR/VR Buttons Question

šŸŒµ Needle Engine
1

Hi :wave::blush:

Is it possible to have a 3D object within a scene act as a AR or VR button.

Iā€™ve had a good look at the ā€˜Custom XR Buttonsā€™ info and sample but that doesnā€™t seem to cover what Iā€™m hoping to achieve. Unless Iā€™ve missed some obviousā€¦ which is entirely possible :sweat_smile:

Itā€™s not a deal breaker if it canā€™t be doneā€¦ but it would be cool if it can :sunglasses:

Cheeeeeeeeers, in advance, for any advice :slightly_smiling_face:

Original Post on Discord

by user 908977119781060648

2

Yep, you can, this should do the trick:

import { Behaviour, GameObject, IPointerDownHandler, WebXR } from "@needle-tools/engine";

// Documentation ā†’ https://docs.needle.tools/scripting

export class ClickToStartXR extends Behaviour  implements IPointerDownHandler{

    private btn: HTMLElement;

    start() {
        const xr = GameObject.findObjectOfType(WebXR);
        if (!xr) return;
        this.btn = WebXR.createARButton(xr);
    }

    onPointerDown() {
        if (!this.btn) return;
        this.btn.click();
    }
}
3

Make sure to turn off the regular button creation, otherwise theyā€™re double

image.png
image.png1378Ɨ542 40.2 KB

4

Fantastic! :star_struck:

Huge thanks for that!!! :partying_face: :rocket:

by user 908977119781060648

5

So, just curiousā€¦ on a similar matterā€¦

If I wanted a 3D object to act as clickable to launch a Quicklook experience, would that also be possible with Needle?

In the past when Iā€™ve done so (in 2D) on web pages just using html Iā€™ve achieved it withā€¦

  <a href="https://www.cartoonfun.co.uk/name_of.reality" rel="ar">
    <img />
    <img style="max-width: 20px;" src="assets/ios_ARBtn_icon.png">View in your space (iOS) </a>
</div>```

Just wondering if there's a way to do something equivalent with Needle?

*by user 908977119781060648*
6

Yep almost the same,

private exporter: USDZExporter;
...
this.exporter = GameObject.findObjectOfType(USDZExporter);
...
this.exporter.exportAsync();
7

Weā€™re handling that <a rel="ar"><img/></a> dance internally in the USDZExporter

8

Aha! :eyes: Ingenius! :star_struck:

Thank you!!!

by user 908977119781060648

9

So, can I launch an external, pre-existing usdz (or .reality file) with that?

by user 908977119781060648

10

By default it will export the part of your scene where USDZExporter is on (or the entire scene if nothing is assigned)

11

But yes, you can also use a pre-existing file by dragging that into the USDZExporter in Unity into the ā€œcustom USDZā€ field

12

Aaand Iā€™d like to know the reason for using a pre-existing file so that we can improve our conversion :slightly_smiling_face:

13

Oooooooo, that sounds cool. Cheers for the info!

For refā€¦ I doubt Iā€™ll ever have an occasion where Iā€™d need to use an external USDZ (Iā€™m hoping not anyway). My curiosity was primarily spurred by wanting to be prepared to cover any eventualities, such as (for example) a compiled/exported USDZ not being able to match the functionality of an equivalent one thatā€™s been specifically created in Reality Composer.

It doesnā€™t seem that what Iā€™ve described would ever actually be an issue though, as (a) the kind of scenes which Iā€™m creating are quite simple and (b) the Needle USDZExporter appears to output a very sophisticated version of things :grinning: :+1:

by user 908977119781060648

14

a compiled/exported USDZ not being able to match the functionality of an equivalent one thatā€™s been specifically created in Reality Composer.

If you ever run into this please let me know - our goal is that weā€™re at least matching what Reality Composer can output for common cases. There are some areas we didnā€™t touch yet (such as scene switching in RC) but in terms of interactive behaviours I think we have pretty good coverage

15

It certainly looks like youā€™ve nailed it from what Iā€™ve seen thus far :star_struck: :raised_hands:

by user 908977119781060648

16

Okay, sorry but Iā€™m not having any luck with creating a ā€˜launch USDZ/Quicklook via a clickable 3D objectā€™.

Based on the previous guidance, Iā€™ve cobbled together the following script (ClickToStartARiOS.ts - the latest of several tries :hot_face: ) but Iā€™m obviously getting various things wrong as none of it seems to work :grimacing:



export class ClickToStartARiOS extends Behaviour  implements IPointerDownHandler{

    private btn: HTMLElement;
    private exporter: USDZExporter;

    start() {
        this.exporter = GameObject.findObjectOfType(USDZExporter);
    }

    onPointerDown() {
        if (!this.btn || !this.exporter) return;
        this.btn.click();

        this.exporter.exportAsync();
    }
}```

Sadly, I'm unable to spot where the problem lies.

If there's a fix for the shambles that I've made I'd be eternally grateful!!! šŸ™

*by user 908977119781060648*
17

Remove the btn lines

18

The ā€œprivateā€¦ā€ and especially the part in the if and the click

19

Sorry, should have made that more explicit

20

No, seriously the failing is mine not yours, I kid you not!

Cheeeeeeersā€¦ and Iā€™ll try again :slightly_smiling_face:

by user 908977119781060648