OBJ imported does not get collisions

Questions
1

Hi everyone.
I’m trying to do a virtual environment, so I have two different kinds of 3d models, the first one is “the visual one” and the other one is a kind of white boxes, just to detect collisions. The problem is that once I runs the page, the camera falls because of the gravity through the collider model, and I don’t really know why.

q1
q11917×978 33 KB

As you can see on the image, the red thing is the collision 3d Model (it is also one single mesh). In the code I apply the red material to that mesh, and then, I told the mesh to detect the collisions, but nothing happne, then, I created the solution I put bellow, but still the camera keeps falling. Can you help me, please?
indent preformatted text by 4 spaces
let canvas;

let engine;

let scene;

mesh: BABYLON.AbstractMesh;

document.addEventListener(‘DOMContentLoaded’, startGame);

function startGame(){

canvas=document.getElementById('renderCanvas');

engine=new BABYLON.Engine(canvas, engine);

scene=createScene();

engine.runRenderLoop(function(){scene.render();});

}

let createScene = function(){

var scene = new BABYLON.Scene(engine);

scene.collisionsEnabled = true;

// Create a camera and its properties.

var camera = createFreeCamera(scene);

var light1 = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

var light2 = new BABYLON.DirectionalLight('light2', new BABYLON.Vector3(-1, -1, 0), scene);



let ground = createGround(scene);

BABYLON.SceneLoader.LoadAssetContainer("3dModels/", "Escena.glb", scene, function (container) {

    var meshes = container.meshes;

    var materials = container.materials;

    container.addAllToScene();

}

);



return scene;

}

function createGround(scene){

let ground = BABYLON.SceneLoader.LoadAssetContainer("3dModels/", "Collider.obj", scene, function (container) {

    var meshes = container.meshes;

    var invisibleMaterial = new BABYLON.StandardMaterial("invisibleMaterial", scene);

    invisibleMaterial.diffuseColor = new BABYLON.Color3.Red;

    meshes[0].material = invisibleMaterial;

    this.mesh=meshes[0];

    meshes.forEach(m => {

        m.checkCollisions = true;

        //m.collisionGroup = Math.random() * 10000;

    });

    container.addAllToScene();

});

return ground;

}

function createFreeCamera(scene){

var camera = new BABYLON.FreeCamera('freeCamera', new BABYLON.Vector3(0,0,0 ), scene);

camera.setTarget(BABYLON.Vector3.Zero());

camera.attachControl(canvas, false);

// Parameters for camera movement

camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);

camera.position.y=1;

camera.checkCollisions=true;

camera.applyGravity=true;

camera.keysUp.push('w'.charCodeAt(0));

camera.keysUp.push('W'.charCodeAt(0));

camera.keysDown.push('s'.charCodeAt(0));

camera.keysDown.push('S'.charCodeAt(0));

camera.keysRight.push('d'.charCodeAt(0));

camera.keysRight.push('D'.charCodeAt(0));

camera.keysLeft.push('a'.charCodeAt(0));

camera.keysLeft.push('A'.charCodeAt(0));

return camera;

}

function modifySettings(){

scene.onPointerDown = function(){

    if(!scene.alreadyLocked){

        canvas.requestesPointerLock();

    }

}

document.addEventListener('pointerlockchange', pointerLockListener);

function pointerLockListener(){

    let element = document.pointerLockElement || null;

    if(element){

        scene.alreadyLocked = true;

    }else {

        scene.alreadyLocked = false;

    }

}

}

window.addEventListener(‘resize’, function(){

engine.resize();

});

2

could you reproduce the issue in the playground: https://playground.babylonjs.com/ ???

This is really hard to know from your file list.