Customize own click in AR

🌵 Needle Engine
1

I tried to make a customized click from the default scripts. I wanted to get a reference from another 3d object and be able to rescale the size. In the browser the things works fine but when i open the AR system , nothing works.

import { Behaviour, isDevEnvironment, GameObject, ObjectRaycaster, RaycastOptions ,serializable, serializeObject ,Button,IPointerClickHandler, PointerEventData} from "@needle-tools/engine";
import { Object3D, Raycaster } from "three";

export class ScaleChange extends Behaviour implements IPointerClickHandler {
    
    @serializable(Object3D)
    target?: Object3D;
    
    start(): void {
        ensureRaycaster(this.gameObject);
    }

    onPointerClick(args: PointerEventData){
        args.use();
        this.target?.scale.multiplyScalar(1.1);
    }

}

function ensureRaycaster(obj: GameObject) {
    if (!obj) return;
    if (!obj.getComponentInParent(Raycaster)) {
        if (isDevEnvironment())
            console.debug("Raycaster on \"" + obj.name + "\" was automatically added, because no raycaster was found in the parent hierarchy.")
        obj.addComponent(ObjectRaycaster);
    }
}

Is this code correct? What I am missing?
Thank you!
is this code correct?

2

Hi polycube!

Your code looks generally correct for handling click events in AR. However, there are a few potential issues to check that might be causing the behavior you’re experiencing in AR:

  1. Raycaster Setup: Ensure that the AR environment is set up to detect raycasting properly. You may need to confirm that the Raycaster component is correctly attached and configured.

  2. Interaction Layer: Make sure that your objects have the correct layers set in the AR scene that allow for interactions. The raycaster might not be detecting the target object if its layer does not match the raycaster settings.

  3. Pointer Events: If you’re testing on a mobile device, ensure that the event system recognizes touch events. Sometimes, touch events may require additional handling to work properly in AR.

  4. Debugging Output: Use debug logs to confirm that the onPointerClick method is being called in the AR context. You can add a simple console.log inside the method to check if it’s firing when you attempt to click.

Here’s the adjusted code snippet with a debug log:

import { Behaviour, isDevEnvironment, GameObject, ObjectRaycaster, RaycastOptions, serializable, serializeObject, Button, IPointerClickHandler, PointerEventData } from "@needle-tools/engine";
import { Object3D } from "three";

export class ScaleChange extends Behaviour implements IPointerClickHandler {
    
    @serializable(Object3D)
    target?: Object3D;
    
    start(): void {
        ensureRaycaster(this.gameObject);
    }

    onPointerClick(args: PointerEventData) {
        args.use();
        console.log("Pointer clicked, target:", this.target);
        if (this.target) {
            this.target.scale.multiplyScalar(1.1);
        }
    }
}

function ensureRaycaster(obj: GameObject) {
    if (!obj) return;
    if (!obj.getComponentInParent(Raycaster)) {
        if (isDevEnvironment())
            console.debug("Raycaster on \"" + obj.name + "\" was automatically added, because no raycaster was found in the parent hierarchy.")
        obj.addComponent(ObjectRaycaster);
    }
}

Make sure you check the console logs in your AR environment. If everything looks fine, but it still doesn’t work, consider providing more information about the AR setup, such as the version of Needle Engine you are using and the hardware specifications of your AR device.

Let me know how it goes or if you need further assistance!

1 replies left - Get a PRO license for more AI replies.
thread_pFCBqfeX3G3OhK5MiNuWI0Dt
Reply to this message to continue the conversation

3

Could you include more info on the “nothing works in AR” part?

Are you using WebXR (usually Android), or QuickLook (iOS)?

4

Hello Felix! Thanks for the message. I am using IOS. When I use the scripts like “set active on click” or “change material on click” it is works on AR , but the customized script doesnt work in AR , just on browser. Would be nice if we can have some more scripting tutorials. :slight_smile:

5

Understood! We have an API for emitting custom actions for QuickLook: Everywhere Actions | Needle Engine Documentation

The “scripting capabilities” there are limited by what Apple allows, since QuickLook is its own runtime, and doesn’t allow arbitrary code. Basically you can combine a number of triggers and actions in custom ways, but that often already allows for quite a wide range of interactions.

For something like your usecase, you can probably use tap triggers together with transform actions to scale a specified object up and down.

6

Thank you Felix! Do you think this will work for create a button for scaling an object?

7

Yep that’s what I meant with:

For something like your usecase, you can probably use tap triggers together with transform actions to scale a specified object up and down.

1 Like
8

Are the Interactive Building Blocks Overview Sample available ? Or can I have some simple example how it works? Thank you!

9

Hi, here are the samples for everywhere actions: Needle Engine Samples
And docs can be found here: Everywhere Actions | Needle Engine Documentation

1 Like