[SOLVED] Find Graph Node of Collision

Help & Support
1

Hey fellow PlayCanvas Developers :slight_smile:

I have an application where I load a 3D Model (GLB) externally with an URL and then show that Model in my Application. The Model was created in Blender with some hirarchy. When my 3D Model is loaded I scan through it’s internal Children (GraphNodes) to reconstruct the hirarchy in my UI and assign the corresponing MeshInstances to each GraphNode entry. I make the list in my UI clickable to highlight the selected objects within the hirarchy of the object.

I would also like to make the different Hirarchy “Parts” selectable by clicking directly on them. Meaning I added collision to the model and a Camera-Raycast script. Of course since the GLB is loaded from one file I always get the same entity in my RaycastResult. I also get a point and normal Vector to where the collision occured. Now to my question. Is it possible to determine which Graphnode I hit ? Maybe from the point Vector I get ?

When I first apporached my project I was using an FBX as Model which I uploaded to my editor with Hirarchy import, but I coulnd’t find anything on loading it externaly and also creating its hirarchy with the associated Render Components. Or would that have been possible ?

Thank you and best regards!

2

http://playcanvas.github.io/#/graphics/model-asset

    // create an entity with render assets
    const entity = assets.statue.resource.instantiateModelEntity({
        castShadows: true
    });

Adding the independent collision components is going to be tricker but doable. No example though.

Could you use the pc.Picker instead in this case?

1 Like
3

Thank you for your reply!

I got it to work with the pc.Picker =)

Here’s my code for anyone wanting to do the same:

var PickWithFramebuffer = pc.createScript('pickWithFramebuffer');

PickWithFramebuffer.prototype.initialize = function () {
    this.mouse = this.app.mouse;
    this.canvas = document.querySelector('#application-canvas');
    this.canvasWidth = this.canvas.clientWidth;
    this.canvasHeight = this.canvas.clientHeight;
    
    this.picker = new pc.Picker(this.app, this.canvasWidth, this.canvasHeight);
    this.mouse.on("mousedown", this.handleClick, this);
    
    this.camera = this.entity.camera;
    this.scene = this.app.scene;
    
    this.app.graphicsDevice.on('resizecanvas', function(){
        this.picker.resize(this.canvas.clientWidth, this.canvas.clientHeight);
        this.canvasWidth = this.canvas.clientWidth;
        this.canvasHeight = this.canvas.clientHeight;
    }.bind(this), this);
    
    this.selection = null;
};

PickWithFramebuffer.prototype.handleClick = function(e) {
    var picker = this.picker;
    picker.prepare(this.camera,this.scene);

    this.selection = picker.getSelection(e.x, e.y, 1, 1);
    if(this.selection[0] != undefined){
        if(this.selection[0].hasOwnProperty("node")){
            this.app.fire("selectHirarchyItemByGraphNode", this.selection[0].node);
        }
    } 
};
2 Likes