Trigger Volume and RayCasting

Help & Support
1

I am trying to cast a ray from my camera to a trigger volume and want to detect the collision with the trigger volume. Here is the script attached to my camera:

pc.script.create('picker_raycast', function (app) {
    // Creates a new PickerRaycast instance
    var PickerRaycast = function (entity) {
        this.entity = entity;
    };

    PickerRaycast.prototype = {
        // Called once after all resources are loaded and before the first update
        initialize: function () {
            app.mouse.on(pc.input.EVENT_MOUSEDOWN, this.onSelect, this);
        },

        onSelect: function (e) {
            var from = this.entity.getPosition();
            var to = this.entity.camera.screenToWorld(e.x, e.y, this.entity.camera.farClip);

            app.systems.rigidbody.raycastFirst(from, to, function (result) {
                var pickedEntity = result.entity;

                //alert("boo"); This works! Someone should say in the tutorial that this needs to be applied to the camera!
            }.bind(this));
        },
        
        // Called every frame, dt is time in seconds since last update
        update: function (dt) {
        }
    };

    return PickerRaycast;
});

Now on my trigger volume I have the following:

pc.script.create('test1', function (app) {
    // Creates a new Test1 instance
    var Test1 = function (entity) {
        this.entity = entity;
    };

    Test1.prototype = {
        // Called once after all resources are loaded and before the first update
        initialize: function () {
            this.entity.collision.on('contact', function (result) {
                alert("finally");
            });
        },

        // Called every frame, dt is time in seconds since last update
        update: function (dt) {
        }
    };

    return Test1;
});

I am not getting the “finally!” alert when I click on the trigger volume. I tried to follow the tutorial from here (http://answers.playcanvas.com/questions/102/how-do-i-implement-trigger-volumes-and-ray-casting) but I haven’t been successful. What am I doing wrong?

2

Hi,

So first thing: raycasts don’t fire collision events. Collision events are fired when two rigidbodies touch or intersect. To detect raycasts, use the callback as you are doing in onSelect.

If you wish, you could fire your own events:

e.g.

app.systems.rigidbody.raycastFirst(from, to, function (result) {
  this.fire("rayhit", result.entity);
}.bind(this));

// in test1

initialize: function () {
  this.picker = app.root.findByName("PickerEntityName");
  this.picker.script.picker_raycast.on("rayhit", function (entity) {
    alert("ray hit");
  });
}

Second thing, what do you mean when you say: “Someone should say in the tutorial that this needs to be applied to the camera!”

3

Hi Dave,
Thank you for the reply! I will give it a try. As far as my comment about adding the script to the camera goes, I meant I followed the picker_raycast tutorial (http://answers.playcanvas.com/questions/102/how-do-i-implement-trigger-volumes-and-ray-casting) on how to script raycasting. The script posted there needs to be added to a camera entity which was not initially clear when I first played with it. For newbies like me that might be a speed bump. I know now that the camera property is only available on cameras.

Thanks again for all your hard work! Just curious as an off topic question…what 3D engine does Playcanvas use? Is it a custom solution or a fork of ThreeJS?

4

PlayCanvas uses it’s own 3D engine. It’s open source and available on Github.