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', { type:'mesh', 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 = this.app.systems.rigidbody.raycastFirst(from, 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.
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.
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
ModelLoad.prototype.loadGLB = function(url){
var app = this.app;
var self = this;
console.log('load from', url);
this.app.assets.loadFromUrl(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;
app.assets.add(asset);
// Add the loaded scene to the hierarchy
asset.ready(function(){
var modelEntity = new pc.Entity('Model');
modelEntity.addComponent('model', {
asset: asset
});
modelEntity.addComponent('collision', {
type:'mesh',
model: model
});
self.entity.addChild(modelEntity);
//Add the model to Teleport global variable
Teleport.model = modelEntity;
app.fire('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
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.
