Objects (surfaces/axis) magnetism (snapping) behavior

[JFK]

Hi All,

I’m new to Babylon.js, for now I succeed :
-Creating scene, camera, light.
-Inserting in the scene a new object by a clic on a button.
-Importing my 3D objects in .glb format.
-Managed the objects movement and rotation behavior.

Now I need to understand how to manage a surface/axis magnetism behavior.

This is a screen shot of my scene, I inserted 4 objects.
I need to magnetism (blue) it when they are near, using a surface (red) and an axis (green), using an axis will permit the parts to rotate from one to another when they are sticked.

I feel that I have to declare a surface and an axis (two per parts in my case).
Should it be declared in Babylon.js or directly in the .glb file?
Then how to manage it?

Difficult for me to find information, any help, ideas are welcome.
Thanks a lot.

[carolhmj]

@JFK

I feel that I have to declare a surface and an axis (two per parts in my case).
Should it be declared in Babylon.js or directly in the .glb file?
Then how to manage it?

Hello and welcome abroad!

It’s your choice between defining this in Babylon or in the .glb, if you do in the .glb, it might be easier to place it wherever you want, as you could do that directly in your authoring tool

As for managing, it’s also up to what works best for you, you could set a specific name for those surface/axis meshes and retrieve the meshes with scene.getMeshByName, or you could use custom .glb metadata: Custom GLB Metadata Workflow from 3dsMax - Demos and projects - Babylon.js (babylonjs.com)

[JFK]

Hi Carol, thanks,

I’m not creating the 3D object, so difficult for me to act on it.
As you can see, my 3D objects are really simple.
It easy to manually add points and axis on it through Babylon:

import * as BABYLON from ‘@babylonjs/core’;

class objectAnchors {

constructor(mesh, anchors) {
    this.mesh = mesh;
    this.anchors = anchors || [];
    this.visuals = []; // Stocke les objets visuels créés
    this.createVisuals(); // Crée les visuels lors de l'initialisation
}

// addAnchor(position, orientation) {
//     const anchor = { position, orientation };
//     this.anchors.push(anchor);
//     this.createVisualForAnchor(anchor); // Créer les visuels pour le nouvel ancrage
// }

createVisuals() {
    this.anchors.forEach(anchor => this.createVisualForAnchor(anchor));
}

createVisualForAnchor(anchor) {

    const scene = this.mesh.getScene();

    // Créer une sphère pour le point d'ancrage
    const anchorSphere = BABYLON.MeshBuilder.CreateSphere("anchor", { diameter: 0.05 }, scene);
    anchorSphere.position = anchor.position.add(this.mesh.position);
    anchorSphere.material = new BABYLON.StandardMaterial("anchorMat", scene);
    anchorSphere.material.diffuseColor = new BABYLON.Color3(1, 0, 0); // Rouge
    anchorSphere.parent = this.mesh;

    // Créer une ligne pour l'axe
    const axisLine = BABYLON.MeshBuilder.CreateLines("axis", {
        points: [
            anchor.position.add(this.mesh.position),
            anchor.position.add(this.mesh.position).add(anchor.orientation.scale(0.5))
        ]
    }, scene);
    axisLine.color = new BABYLON.Color3(0, 1, 0); // Vert
    axisLine.parent = this.mesh;

    //Stocker les objets visuels
    this.visuals.push(anchorSphere, axisLine);
}

}

const paletAnchorsData = [
{ position: new BABYLON.Vector3(0, 0, 0), orientation: new BABYLON.Vector3(0, 0, 1) },
{ position: new BABYLON.Vector3(0, 0, 0), orientation: new BABYLON.Vector3(0, 0, -1) },
// { position: new BABYLON.Vector3(0, 0, 0.5), orientation: new BABYLON.Vector3(0, 0, 1) },

];

const interfaceAnchorsData = [
{ position: new BABYLON.Vector3(0, 0, 0), orientation: new BABYLON.Vector3(0, 0, 1) },
{ position: new BABYLON.Vector3(0, 0, -0.1), orientation: new BABYLON.Vector3(0, 0, -1) },
// { position: new BABYLON.Vector3(0, 0, 0.5), orientation: new BABYLON.Vector3(0, 0, 1) },

];

export { objectAnchors, paletAnchorsData, interfaceAnchorsData };

Then I “call” them when I add an object :

export function addPaletToScene(scene, camera, canvas) {
BABYLON.SceneLoader.ImportMesh(“”, “public/”, “Palet.glb”, scene, function (meshes) {
meshes.forEach((mesh) => {
setupDragAndRotateBehaviors(mesh, scene, camera, canvas);
// Crée une instance de ObjectAnchors avec les données d’ancrage pour Palet
const paletAnchors = new objectAnchors(mesh, paletAnchorsData);
});
addToCart(“Palet”);
});
}

export function addInterfaceToScene(scene, camera, canvas) {
BABYLON.SceneLoader.ImportMesh(“”, “public/”, “Interface.glb”, scene, function (meshes) {
meshes.forEach((mesh) => {
setupDragAndRotateBehaviors(mesh, scene, camera, canvas);
// Crée une instance de ObjectAnchors avec les données d’ancrage pour Interface
const interfaceAnchors = new objectAnchors(mesh, interfaceAnchorsData);
});
addToCart(“Interface”);
});
}

As you can see, the points and the axis (two per object) are well created : (centered to the object)
But I don’t understand why, it also create two other points and axis located “under” the object when inserted to the scene.

After randomly moving the object in the scene, I can see that there is no link between my object or my object bounding box.

Any idea from where they can come ?
Thanks.

EDIT :
It seems to come from that the points and axis are associated to two different mesh :

Now I have to understand why there is a “color” and a “root” mesh.

EDIT2 :
Got it, i simply added :
if (this.mesh.name === “color”) {…

before create the point and line.

Now I have to find the way to “snap” / “magnetise” the point following the axis !

[carolhmj]

@JFK

Now I have to understand why there is a “color” and a “root” mesh.

The “root” mesh appears when loading the GLB file, which uses a right handed coordinate system. It is required to convert to Babylon’s left handed coordinate system.