[SOLVED] Detecting collision on mouse click issue

Hello. I have some problems with collisions.
I create a cylinder entity with collision component and try to detect mouse click on it. Here’s the code:

testCircle.addComponent(pc.ASSET_MODEL, {type: 'cylinder'});
    testCircle.model.material = blackMat;
    testCircle.setLocalPosition(-12, 0.01, 8);
    testCircle.setLocalScale(4, 0.1, 4);
    testCircle.addComponent('collision', 
    {
        type: "cylinder",
        Radius: 2,
        Height: 0.1,
        Axis: 'Y'
    });

ANd here’s the part which detects collisions:

var from = this.camera.camera.screenToWorld(e.x, e.y, this.camera.camera.nearClip);
var to = this.camera.camera.screenToWorld(e.x, e.y, this.camera.camera.farClip);
var result = this.app.systems.rigidbody.raycastFirst(from, to);
console.log(result);
if (result) {
   var pickedEntity = result.entity;
   console.error(pickedEntity.name);
}

the programmatically created entity almost never returns a collision;
But the entity i created in editor works fine.

Could you help me? I want to use playcanvas engine without editor.
Here’s the link to my project: https://playcanvas.com/editor/scene/542784

A few things are wrong here.

  1. You have created a model component using the pc.ASSET_MODEL enum. Just pass ‘model’ there. Yes, I know that pc.ASSET_MODEL is defined as ‘model’ but that token is not meant to be used in this context.
  2. You have got the options for the collision component wrong. axis is 0, 1 or 2 (not ‘x’, ‘y’ or ‘z’). See the API reference for this. You also shouldn’t specify model if the type is cylinder.
  3. You don’t need a rigidbody component if you just want to do a raycast. The collision component is sufficient. But if you do add the rigidbody component and the type is dynamic, the body will fall off the screen due to gravity. You would make the body static if you wanted to avoid that.

Here’s my tidy up and correction of your script:

var OnClickScript = pc.createScript('on-click-script');

OnClickScript.prototype.initialize = function() {
    this.app.mouse.on(pc.EVENT_MOUSEUP, this.onSelect, this);
    this.camera = this.app.root.findByName('Camera');
};
OnClickScript.prototype.onSelect = function(e) {

    var from = this.camera.camera.screenToWorld(e.x, e.y, this.camera.camera.nearClip);
    var to = this.camera.camera.screenToWorld(e.x, e.y, this.camera.camera.farClip);
    var result = this.app.systems.rigidbody.raycastFirst(from, to);
    console.log(result);
    if (result) {
        var pickedEntity = result.entity;
        console.error(pickedEntity.name);
    }
};


var GameManager = pc.createScript('gameManager');

// initialize code called once per entity
GameManager.prototype.initialize = function() {
    var firstCircle = new pc.Entity('firstCircle');

    var greenMat = new pc.StandardMaterial();
    greenMat.diffuse.set(0, 255, 0);
    greenMat.update();
    
    firstCircle.addComponent('model', { type: 'cylinder' });
    firstCircle.model.material = greenMat;
    firstCircle.setLocalPosition(2, 0.01, 0);
    firstCircle.setLocalScale(4, 0.01, 4);

    firstCircle.addComponent('collision', {
        type: "cylinder",
        radius: 2,
        height: 0.01
    });
    
    firstCircle.addComponent('script');
	firstCircle.script.create('on-click-script');
    console.log(firstCircle.name);
    
    this.app.root.addChild(firstCircle);
};

// update code called every frame
GameManager.prototype.update = function(dt) {
    
};

thanks! You saved my day

1 Like