# Mesh not colliding with each other but colliding with cube

**URL:** <https://forum.babylonjs.com/t/mesh-not-colliding-with-each-other-but-colliding-with-cube/43874>\
**Category:** Questions\
**Created:** [September 5, 2023, 6:02pm UTC](https://forum.babylonjs.com/t/mesh-not-colliding-with-each-other-but-colliding-with-cube/43874 "2023-09-05T18:02:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![AR1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ar1/32/34818_2.png) [@AR1](https://forum.babylonjs.com/u/AR1)\
**Post date:** [September 5, 2023, 6:02pm UTC](https://forum.babylonjs.com/t/mesh-not-colliding-with-each-other-but-colliding-with-cube/43874/1 "2023-09-05T18:02:46Z")

</div>

Why the two meshes not coliding with each other but they are colliding with the cube?:  
import { canvas, engine, scene, camera, light, ground } from ‘./initialize.js’;

var character;  
var character2;  
var walkAnimation; // Reference to the “walk” animation

const havokInstance = await HavokPhysics();  
// pass the engine to the plugin  
const hk = new BABYLON.HavokPlugin(true, havokInstance);  
// enable physics in the scene with a gravity

var cube = BABYLON.Mesh.CreateBox(“cube”, 2, scene);  
cube.position.y = 1;  
var cubeMaterial = new BABYLON.StandardMaterial(“cubeMaterial”, scene);  
cubeMaterial.diffuseColor = new BABYLON.Color3(4, 0, 0); // Set the color as needed  
cube.material = cubeMaterial;  
cube.physicsImpostor = new BABYLON.PhysicsImpostor(cube, BABYLON.PhysicsImpostor.BoxImpostor, {  
mass: 1, // Mass of the cube  
friction: 0.5, // Friction value (adjust as needed)  
restitution: 0 // Restitution value (bounciness, adjust as needed)  
}, scene);   
cube.checkCollisions = true;  
cube.physicsImpostor.physicsGroup = 1;  
cube.physicsImpostor.physicsMask = 1;

// Import a character model (replace ‘character.glb’ with your character’s GLB file)  
BABYLON.SceneLoader.ImportMesh(“”, “”, “farmer.glb”, scene, function (meshes, particleSystems, skeletons) {  
character = meshes[0];  
character.position = new BABYLON.Vector3(3, 0, 0); // Initial position

```
// Create a custom collision mesh (your 'customCollisionMesh')
var customCollisionMesh = BABYLON.MeshBuilder.CreateBox("customCollisionMesh", { size: 1 }, scene);
customCollisionMesh.position = new BABYLON.Vector3(0, 1, 0); // Position it at the character's position
customCollisionMesh.isVisible = true; // Make it invisible

// Check if the character has an existing physics impostor and dispose of it
if (character.physicsImpostor) {
    character.physicsImpostor.dispose();
}

// Create a physics impostor for the custom collision mesh using a simplified shape (BoxImpostor)
var impostor = new BABYLON.PhysicsImpostor(customCollisionMesh, BABYLON.PhysicsImpostor.BoxImpostor, {
    mass: 0, // Set mass as needed
    friction: 0.1,
    restitution: 0.8,
	
}, scene);

// Enable collisions for the custom collision mesh
customCollisionMesh.checkCollisions = true;

```

// Example usage

```
// Attach the custom collision mesh to the character
customCollisionMesh.parent = character;

// Use the custom collision mesh's impostor for the character
character.physicsImpostor = impostor;

// Enable collisions for the character
character.checkCollisions = false;

// Find and store the "walk" animation
//walkAnimation = scene.getAnimationGroupByName("standard_walk");

```

});

BABYLON.SceneLoader.ImportMesh(“”, “”, “farmer.glb”, scene, function (meshes, particleSystems, skeletons) {  
character2 = meshes[0];  
character2.position = new BABYLON.Vector3(2, 0, 0); // Initial position

```
// Create a custom collision mesh (your 'customCollisionMesh')
var customCollisionMesh2 = BABYLON.MeshBuilder.CreateBox("customCollisionMesh2", { size: 1 }, scene);
customCollisionMesh2.position = new BABYLON.Vector3(0, 1, 0); // Position it at the character's position
customCollisionMesh2.isVisible = true; // Make it invisible

// Check if the character has an existing physics impostor and dispose of it
if (character2.physicsImpostor) {
    character2.physicsImpostor.dispose();
}

// Create a physics impostor for the custom collision mesh using a simplified shape (BoxImpostor)
var impostor2 = new BABYLON.PhysicsImpostor(customCollisionMesh2, BABYLON.PhysicsImpostor.BoxImpostor, {
    mass: 0, // Set mass as needed
    friction: 0.1,
    restitution: 0.8,
	checkCollisions: true
}, scene);

// Enable collisions for the custom collision mesh
customCollisionMesh2.checkCollisions = true;

// Attach the custom collision mesh to the character
customCollisionMesh2.parent = character2;

// Use the custom collision mesh's impostor for the character
character2.physicsImpostor = impostor2;

// Enable collisions for the character
character2.checkCollisions = true;

// Set up collision callback
impostor2.registerOnPhysicsCollide(cube.physicsImpostor, function (main, collided) {
    console.log("Collision detected between character and ground.");
});

// Find and store the "walk" animation
//walkAnimation = scene.getAnimationGroupByName("standard_walk");

```

});

function stopAnimation(distance){  
if (walkAnimation) {  
console.log(‘Stop!’)  
walkAnimation.stop(); // Stop the “walk” animation  
}  
}

// Function to move the character to a destination point  
function moveCharacterTo(destination) {  
var initialPosition = character.position.clone();  
var distance = BABYLON.Vector3.Distance(initialPosition, destination);  
var speed = 0.02  
var duration = distance/speed;

console.log(distance)  
BABYLON.Animation.CreateAndStartAnimation(  
“characterMove”,  
character,  
“position”,  
60,  
duration,  
initialPosition,  
destination,  
BABYLON.Animation.ANIMATIONLOOPMODE\_CONSTANT,

```
    null, // Callback function when animation completes (null for now)
    function () {
        // Animation completion callback
        if (walkAnimation) {
			console.log(distance)
            walkAnimation.stop(); // Stop the "walk" animation
        }
    }
);

```

}

// Handle mouse click to move the character and make it look at the pointer  
canvas.addEventListener(“pointerdown”, function (event) {

```
var pickResult = scene.pick(scene.pointerX, scene.pointerY);
var selectedMesh = pickResult.pickedMesh;
     
    // Check if the selected mesh has a specific tag or metadata
    
if (pickResult.hit) {
	if (selectedMesh && selectedMesh.id == "ground") {
		 if (selectedModel) {
    //walkAnimation.start(true, 1, walkAnimation.from, walkAnimation.to, false);
    var destination = pickResult.pickedPoint;
    moveCharacterTo(destination);

    // Calculate the direction vector from the character's position to the destination
    var direction = destination.subtract(character.position);
    
    // Reverse the direction vector and use the lookAt method
    character.lookAt(character.position.subtract(direction));
	}
	}
}

```

});

var selectedModel = null; // Variable to store the selected GLB model  
var outlineMesh = null; // Variable to store the outline mesh

// Function to create a glowing sphere  
var glowingSphere;

// Function to create a glowing sphere with circular motion  
function createGlowingSphere(selectedMesh) {  
glowingSphere = BABYLON.MeshBuilder.CreateSphere(“glowingSphere”, { diameter: 0.1 }, scene);

```
// Apply a glowing material to the sphere
var glowMaterial = new BABYLON.StandardMaterial("glowMaterial", scene);
glowMaterial.emissiveColor = new BABYLON.Color3(0, 4, 0); // Green glow color
glowMaterial.alpha = 0.5; // Adjust glow intensity as needed
glowingSphere.material = glowMaterial;

// Make the glowing sphere non-pickable and disable shadows
glowingSphere.isPickable = false;
glowingSphere.receiveShadows = false;

// Parent the glowing sphere to the character's mesh
glowingSphere.parent = character;

// Define variables for circular motion
var radius = 0.1; // Radius of the circular path
var speed = 0.05; // Speed of the circular motion (adjust as needed)
var angle = 0; // Initial angle

// Use the scene's registerBeforeRender function to update the position
scene.registerBeforeRender(function () {
    // Calculate the new position in a circular path
    var x = radius * Math.sin(angle);
    var z = radius * Math.cos(angle);

    // Update the position of the glowing sphere
    glowingSphere.position = new BABYLON.Vector3(x, 2.1, z);

    // Increase the angle to make the sphere move in a circular motion
    angle += speed;
});

```

}

// Function to handle model selection and ray interaction  
var selectedModel = null; // Variable to store the selected GLB model  
var outlineMesh = null; // Variable to store the outline mesh

// Function to create an outline mesh for the selected model  
function createOutlineMesh(selectedMesh) {  
createGlowingSphere(selectedMesh);  
}

function selectModel(event) {  
var pickResult = scene.pick(scene.pointerX, scene.pointerY);

```
if (pickResult.hit) { 
    var selectedMesh = pickResult.pickedMesh;
    
    if (selectedMesh && selectedMesh.id != "ground") {
        if (selectedMesh !== selectedModel) {
            // Deselect the previously selected model (if any)
            if (selectedModel) {
                glowingSphere.visibility = 0;
            }
             
            // Select the new model
            selectedModel = selectedMesh;
            
            // Create an outline for the selected model
            createOutlineMesh(selectedModel);

            // Show the glowingSphere when a new character is selected
            glowingSphere.visibility = 1;
        } else {
            // Toggle the visibility of glowingSphere when the same character is clicked again
            glowingSphere.visibility = glowingSphere.visibility === 0 ? 1 : 0;
        }
    }
} else {
    // If nothing is hit, clear the selection and remove the outline
    if (selectedModel) {
        // Restore the original material of the previously selected model
        glowingSphere.visibility = 0;
        selectedModel = null;
    }
}

```

}

// Handle mouse click to select the GLB model  
canvas.addEventListener(“pointerdown”, selectModel);

// Run the Babylon.js engine  
engine.runRenderLoop(function () {  
scene.render();  
});

// Handle window resize  
window.addEventListener(“resize”, function () {  
engine.resize();  
});

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 5, 2023, 10:11pm UTC](https://forum.babylonjs.com/t/mesh-not-colliding-with-each-other-but-colliding-with-cube/43874/2 "2023-09-05T22:11:25Z")

</div>

This is impossible to answer to full code posted here.

Could you create a simple repro in the playground instead [https://playground.babylonjs.com/](https://playground.babylonjs.com/) ?

This will help the entire community to address your issue

---

<div class="post-metadata">

**Author:** ![AR1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ar1/32/34818_2.png) [@AR1](https://forum.babylonjs.com/u/AR1)\
**Post date:** [September 6, 2023, 10:23am UTC](https://forum.babylonjs.com/t/mesh-not-colliding-with-each-other-but-colliding-with-cube/43874/3 "2023-09-06T10:23:42Z")

</div>

Hi, seba. Here is the playground: [https://playground.babylonjs.com/#U01P4L#1](https://playground.babylonjs.com/#U01P4L#1)

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [September 6, 2023, 11:29am UTC](https://forum.babylonjs.com/t/mesh-not-colliding-with-each-other-but-colliding-with-cube/43874/4 "2023-09-06T11:29:16Z")

</div>

The PG has error messages:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/e/6e36536761ea10480d3cbb128dfea8b93a62332d.png)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 6, 2023, 1:57pm UTC](https://forum.babylonjs.com/t/mesh-not-colliding-with-each-other-but-colliding-with-cube/43874/5 "2023-09-06T13:57:54Z")

</div>

Also the code looks really long for a minimal repro. Are you only included the bare minimum to highlight your issue ?

---

<div class="post-metadata">

**Author:** ![AR1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ar1/32/34818_2.png) [@AR1](https://forum.babylonjs.com/u/AR1)\
**Post date:** [September 6, 2023, 3:54pm UTC](https://forum.babylonjs.com/t/mesh-not-colliding-with-each-other-but-colliding-with-cube/43874/6 "2023-09-06T15:54:19Z")

</div>

Here is the code with no errors: [https://playground.babylonjs.com/#U01P4L#6](https://playground.babylonjs.com/#U01P4L#6)

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [September 6, 2023, 4:03pm UTC](https://forum.babylonjs.com/t/mesh-not-colliding-with-each-other-but-colliding-with-cube/43874/7 "2023-09-06T16:03:37Z")

</div>

PhysicsGroup and physicsMask aren’t properties that exist in the PhysicsImpostor. Collision filtering is only available in the Havok V2 architecture, see: [Raycast | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/features/featuresDeepDive/physics/raycast)