Mesh collider for raycast by script

Good afternoon guys!

I have a GLB model that i load from a hosted server and i need to set its mesh as a collider so i can do a raycast on it.

First i set the collider for the model:

model.addComponent('collision', {
model:model.model // I don't know exacly if it is to add the entire model here

and then do a raycast based on mouse click:

var from = camera.screenToWorld(dx, dy, camera.nearClip);
var to = camera.screenToWorld(dx, dy, camera.farClip);
var result =, to);
console.log('Raycast result: ', result);

But in the end, i click at the model and nothing is detected. Am i doing something wrong? How can i add the mesh of a model as it mesh collider?

I can also use another approach if there is something that can detect world position and normal from a user click

Another information: I load this GLB model using loadGlb() funciton. It returns a ready entity and i need to use the model inside of it to set on collider.

In this context, is model an entity or a component?

1 Like

Model is an entity that have a model component.
My model can be acessed here:
I only need to load it by loadGlb() and attrib its model as a collider

In which case, you may want to try:

model.addComponent('collision', {
model: model.model.model

pc.Entity -> pc.ModelComponent -> pc.Model

1 Like

I tried it too, but still don’t work. Can you try to add a collider by script loading The GLB file from this link please?

I don’t know why it won’t add correctly

Works fine for me?

One thing I have noticed is that the the raycasts hit the backfaces of the ceiling but once the camera is in the room, it hits all the surfaces I expect to.

1 Like

Works for me too!!! That was already a great help!! But now the collision is not getting the local scale from GraphNode, causing it to be totally different size from the model

my code:

ModelLoad.prototype.loadGLB = function(url){

var app =;
var self = this;

console.log('load from', url);, 'binary', function (err, asset) {

    var glb = asset.resource;
    loadGlb(glb, app.graphicsDevice, function (model, textures, animationClips) {
        // Wrap the model as an asset and add to the asset registry
        var asset = new pc.Asset('gltf', 'model', {
            url: ''
        asset.resource = model;
        asset.loaded = true;

        // Add the loaded scene to the hierarchy
            var modelEntity = new pc.Entity('Model');
            modelEntity.addComponent('model', {
                asset: asset

            modelEntity.addComponent('collision', {
                model: model

            //Add the model to Teleport global variable
            Teleport.model = modelEntity;

  'UI:loading', false);


The GLB model entity is added to another entity that has the size:<0.1, 0.1, 0.1>, but only the model gets the size modification.
OBS: The collider model is not show on the screen, I added it by console just for illustrate

Collision and rigidBodies don’t scale with entity scales or their parents.

Is there any alternative to do that?

It’s not really a supported feature in ammo.js / Bullet

Having a quick look at Bullet, it looks like you can scale the collision shape but I don’t know if it is exposed in ammo.js and if it was, you would need to dig into the engine code to work out how to change it.

The best workaround is to have the model exported at the ‘correct’ or expected size. If you need dynamic scaling, you will have to consider how to get the same effect without scaling the source model.

Another alternative is to write your own raycaster that does take into consideration of scale.

1 Like

Thanks, i’ll try to find a solution

The problems never dissappear :sleepy:
I tried to fork your project and change to another GLB file that i use:

It is the same code, the same project, but at this the collider seems to be inverted? Any idea of what is causing it?

Only thing that comes to mind is perhaps a node on the model has a transformation (e.g inverted scale?) on it?