[SOLVED] Click on Entity to open URL

I’m new to PlayCanvas and coding in general (deadly combination) and am trying to add interactivity that would allow the user to click (or tap on mobile) a floating object and have it open a URL. The entity picking article isn’t proving to be very beginner friendly. I’m adding the “PickerRaycaster” script to the camera and the “Pulse” script to the entities (just to test before adding the URL linking). I don’t think I have it set up properly. When I launch and click on an entity I get an error: “TypeError: pickedEntity.script is undefined” seems like it should be straight forward but I can’t find info in the forum.
https://playcanvas.com/project/1039968/overview/blank-project

Hi @aisaleen and welcome!

Can you please share the editor link of your project so someone can take a look?

With the link you shared I don’t get any error, but nothing seems to happen anyway.

I have seen your other topic with the editor link, so I was already be able to check your project.

The pickedEntity is not the entity you probably expect. It’s the Front entity that has no script component attached.

Hey thanks so much for responding and sorry about the link! Glad you were able to get to it! Ahh I feel pretty silly haha. I had that entity there to keep the objects contained. Do you know of a different way to keep them contained so the scripting will work properly?

I think the easiest way is to use the extension that is used in the project below. With this you can do a raycast and check if the first result has a specific tag.

https://developer.playcanvas.com/en/tutorials/physics-raycasting-by-tag/

There is also a raycastAll API to get all entities instead of just the first one, but I personally don’t like the setup of this API.

Wow thanks so much, I got it all to work! Now when I click an object, a url opens, but do you know how I can set it up to open a different set url for each individual entity? Maybe there’s a way to do this with tags?

That should be something like below.

if (result) {
    var pickedEntity = result.entity;

    if (pickedEntity.tags.has('tag1')) {
        window.open("https://www.w3schools.com");
    }
    else if (pickedEntity.tags.has('tag2')) {
        window.open("https://www.w3schools.com");
    }
}

That’s what I would have thought too, but I can’t seem to get it to work. I tested it out with two to start:

Raycast.prototype.doRayCast = function (screenPosition) {
    // Initialise the ray and work out the direction of the ray from the a screen position
    this.cameraEntity.camera.screenToWorld(screenPosition.x, screenPosition.y, this.cameraEntity.camera.farClip, this.endRayPosition); 
    var result = this.app.systems.rigidbody.raycastFirstByTag(this.cameraEntity.getPosition(), this.endRayPosition, 'item1', 'item2');
   if (result) {
    var pickedEntity = result.entity;

    if (pickedEntity.tags.has('item1')) {
        window.open("https://www.neopets.com/");
    }
    else if (pickedEntity.tags.has('item2')) {
        window.open("https://www.rebekahheppner.net");
    }
   }
};

The rigidbody extension script accepts only one tag by default. You can extend this, but I suggest keeping item as the tag for the raycast and giving your item entities the item tag as well. Then you can add an extra tag like item1 and item2 to individual item entities.

Ah it worked!! Thank you so much, I really appreciate all your help!

1 Like