[request] complex tutorial on using UniversalAR + JS

Feature Requests
#1

Hey guys. I am aware of the examples on github on how to use UniversalAR with threejs, aframe, etc. However, I’d like a more complex example. How could I make a business card, for example? I’d like something with buttons, a vid, content that is relative to the screen, content that is relative to the tracking, masks, etc. All the good stuff that I know how to make using ZapWorks Studio, but don’t have the faintest idea on how to do it with UniversalAR and JS. I want a more beefy example. Something that is not the equivalent of a “hello world” program. I’m sure everybody would benefit from it. Thanks a lot!

1 Like
#2

Hi @marks,

This is a great request, and I’m sure it’s something the community would benefit from. I’ve been working hard to get some examples out and I’d love to also get some video tutorials going under that same vein, so rest assured - although I can’t say when, they will be coming!

Have a great day!
Francesca :blush:

1 Like
#3

Hi @Francesca,
It would be great, if you could provide some examples with 3D models using FaceTracking. Like, FaceTracking with 3D model of sunglasses with zappar-react-three-fiber. Or something like this would be great.

#4

Hi @roman.exceed,

Thanks for your feedback.

I’ve added a more complex face tracking example, which uses a head mask alongside a GLB model.

Here’s what it looks like

You can find the implementation over on https://github.com/zappar-xr/zappar-react-three-fiber-examples in

./src/face-tracking-helmet/

Relevant commit

I hope you find this helpful :slight_smile:

#5

Hi @Deim,
Thanks a lot for this example.
I’ve got a question about the code.
Could you explain const Helmet = scene.getObjectByName('Helmet'); why do you need this line and why ‘Helmet’?
and why don’t you just use scene instead?

#6

and how to add "@zappar/zappar-react-three-fiber" to my react app without webpack

#7

Hi @roman.exceed,

We’re grabbing a specific object called ‘Helmet’ from the scene. Adding the whole scene is something I’d rather avoid as it may contain other unnecessary things such as Cameras or Lights.

Could you please further expand on your second question, do you mean a react app created by npx create-react-app ?

#8

@Deim, thanks for the answer!
Yes, I mean a react app created by npx create-react-app.

#9

Hi @roman.exceed,

To use UAR with create-react-app, you will need to integrate react-app-rewired to override some webpack config for loading our .wasm and other binaries. In addition to that, you will also need the dev server to use https.

Here’s a nice tutorial on setting up https.
Here’s a config-overrides.js to be used with react-app-rewired.

Using these two resources, you should be able to get started using create-react-app.

Let us know how it goes! :slight_smile:

1 Like
#10

hey @Deim,
Thanks a lot for your answer, it helped me a lot!