javascript - How to create and use buttons in Spark AR (for Facebook)? - Stack Overflow

admin管理员组

文章数量:1403452

I'm working on a simple AR effect for Facebook in Spark AR studio using JavaScript. I have two 3D objects in the scene and I want to switch between them on button click.

So, for example, I have two buttons, and when I click on the first button I want to show the first 3D object (and hide another one). And vice versa - when I click on the second button I want to show the second 3D object and hide the first one.

I can see some examples of how can I access the object in the scene through the script, but I didn't find yet an example of how to create or use buttons in Spark AR.

Is there any easy "drag-and-drop" way to create a button and assign a function to it (like in Unity)? Or should I create an image of the button on the canvas in the scene, use JavaScript to "find" it, detect if the finger touch was made over this image and trigger a function this way?

I'm working on a simple AR effect for Facebook in Spark AR studio using JavaScript. I have two 3D objects in the scene and I want to switch between them on button click.

So, for example, I have two buttons, and when I click on the first button I want to show the first 3D object (and hide another one). And vice versa - when I click on the second button I want to show the second 3D object and hide the first one.

I can see some examples of how can I access the object in the scene through the script, but I didn't find yet an example of how to create or use buttons in Spark AR.

Is there any easy "drag-and-drop" way to create a button and assign a function to it (like in Unity)? Or should I create an image of the button on the canvas in the scene, use JavaScript to "find" it, detect if the finger touch was made over this image and trigger a function this way?

• javascript
• facebook
• augmented-reality

Share Improve this question Follow edited Jul 11, 2020 at 20:27 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Nov 30, 2018 at 20:50 RumataRumata 1,04733 gold badges2121 silver badges5252 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

There is no easy "drag-and-drop" way to create a button and assign a function to it.

You will need to create an image of the button on the canvas in the scene, use Javascript to "find" it, detect if the finger touch was made over this image and trigger a function this way. Here is example code:

var Scene = require('Scene');
var TouchGestures = require('TouchGestures');

var myBtn = Scene.root.find('button');
TouchGestures.onTap(myBtn).subscribe(function() {
        //do stuff here
});

Also do not forget to enable the Tap Gesture in your project capabilities settings.

There is also the Native UI Picker that you can make use of: https://developers.facebook./docs/ar-studio/docs/native-ui (I'm not sure if this was available at the time the question was posted, I'm new to the game)

This is more "drag-and-drop" in that you don't have to create and place the buttons, just assign textures to fill them in, and then you can write a script to do whatever you want when the user selects a button.

本文标签： javascriptHow to create and use buttons in Spark AR (for Facebook)Stack Overflow