Interactions
In Babylon.js, the interactions are commonly handled through intersections and picking. These features allow you to detect when objects in a scene intersect with each other or when a user interacts with objects using input devices.
Intersections
Intersections in Babylon.js refer to checking whether two or more meshes (objects) overlap or collide. This is useful in many scenarios like detecting collisions in a game, physics simulations, or determining if objects are intersecting in 3D space.
In the following example, the spheres became red during the collision with planes. Take a look at the second argument of .intersectsMesh function, it determines the accuracy of the intersection detection.
const scene = useScene();
useEffect(() => {
let alpha = Math.PI;
function intersect(){
const balloon1 = balloon1Ref.current!;
const balloon1Mat = balloon1.material as StandardMaterial;
//balloon 1 intersection -- Precise = false
if (balloon1.intersectsMesh(plane1Ref.current!, false)) {
balloon1Mat.emissiveColor = new Color3(1, 0, 0);
} else {
balloon1Mat.emissiveColor = new Color3(1, 1, 1);
}
//balloon 2 intersection -- Precise = true
const balloon2 = balloon2Ref.current!;
const balloon2Mat = balloon2.material as StandardMaterial;
if (balloon2.intersectsMesh(plane2Ref.current!, true)) {
balloon2Mat.emissiveColor = new Color3(1, 0, 0);
} else {
balloon2Mat.emissiveColor = new Color3(1, 1, 1);
}
//balloon 3 intersection on single point
const balloon3 = balloon3Ref.current!;
const balloon3Mat = balloon3.material as StandardMaterial;
if (balloon3.intersectsPoint(intersectionPoint)) {
balloon3Mat.emissiveColor = new Color3(1, 0, 0);
} else {
balloon3Mat.emissiveColor = new Color3(1, 1, 1);
}
alpha += 0.005;
const positionY = Math.cos(alpha) / 150;
balloon1.position.y += positionY;
balloon2.position.y += positionY;
balloon3.position.y += positionY;
}
scene.registerBeforeRender(intersect);
return () => scene.unregisterBeforeRender(intersect);
}, []);
// ...
<>
<plane ref={plane1Ref} name='plane-1' position={new Vector3(-1.5, 0, 0)} rotation={new Vector3(Tools.ToRadians(45), 0, 0)} options={{ size: 1 }}>
<box name='plane-1-wireframe' rotation={new Vector3(Tools.ToRadians(45), 0, 0)} options={{ width: 1, height: Tools.ToRadians(40), depth: Tools.ToRadians(40) }} />
</plane>
<plane ref={plane2Ref} name='plane-2' position={new Vector3(0, 0, 0)} rotation={new Vector3(Tools.ToRadians(45), 0, 0)} options={{ size: 1 }}>
<box name='plane-2-wireframe' options={{ width: 1, height: 1, depth: 0.05 }} />
</plane>
<sphere ref={intersectionPointRef} name='intersection-point' options={{ diameter: 0.05 }} position={intersectionPoint} />
<sphere ref={balloon1Ref} name='balloon-1' position={new Vector3(-1.5, 0.5, 0)} options={{ diameter: 0.2 }}>
<standardMaterial name='balloon-1-mat' />
</sphere>
<sphere ref={balloon2Ref} name='balloon-2' position={new Vector3(0, 0.5, 0)} options={{ diameter: 0.2 }}>
<standardMaterial name='balloon-2-mat' />
</sphere>
<sphere ref={balloon3Ref} name='balloon-3' position={new Vector3(1, 0.5, 0)} options={{ diameter: 0.2 }}>
<standardMaterial name='balloon-3-mat' />
</sphere>
<standardMaterial name='surface-mat' backFaceCulling={false} emissiveColor={Color3.Green()} assignTo={['plane-1', 'plane-2', 'intersection-point']} />
<standardMaterial name='wireframe-mat' emissiveColor={Color3.White()} wireframe assignTo={['plane-1-wireframe', 'plane-2-wireframe']} />
</>
Picking
Picking in Babylon.js refers to selecting or “picking” a 3D object in the scene using user input like a mouse click or a touch event. When the user clicks or taps on a mesh, Babylon.js can detect which mesh was clicked and perform certain actions (like highlighting it, changing its color, moving it, etc.).
In the following example, for each frame, a ray cast is thrown from the origin (red box) to pick multiple meshes. When a mesh is hit by the ray, it will increase his height.
const scene = useScene();
useEffect(() => {
function castRay() {
const box = boxRef.current!;
const origin = box.position;
let forward = new Vector3(0, 0, 1);
forward = vecToLocal(forward, box);
let direction = forward.subtract(origin); // new Vector3(0, -0.25, 1);
direction = Vector3.Normalize(direction); // it ensures the Vector has length of 1 (important in raycast scenarios)
const length = 4;
const ray = new Ray(origin, direction, length);
const rayHelper = new RayHelper(ray);
rayHelper.show(scene);
const hits = scene.multiPickWithRay(ray, predicate);
if (hits) {
hits.forEach(mesh => {
mesh.pickedMesh!.scaling.y += 0.01;
});
}
}
scene.createDefaultLight();
const box = boxRef.current!;
scene.onPointerMove = function () {
const pickeResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickeResult.hit) {
const diffX = pickeResult.pickedPoint!.x - box.position.x;
const diffY = pickeResult.pickedPoint!.z - box.position.z;
box.rotation.y = Math.atan2(diffX, diffY);
}
};
scene.registerBeforeRender(castRay);
return () => scene.unregisterBeforeRender(castRay);
}, []);
// ...
<>
<box ref={boxRef} name='pointer-box' position={new Vector3(0, 0.25, 0)} isPickable={false} scaling={new Vector3(1, 0.5, 1)}>
<standardMaterial name='pointer-mat' diffuseColor={Color3.Red()} />
</box>
<box name='box-1' position={new Vector3(0, 0.5, 2)}>
<standardMaterial name='box-1-mat' diffuseColor={Color3.Blue()} />
</box>
<box name='box-2' position={new Vector3(2, 0.5, 0)}>
<standardMaterial name='box-2-mat' diffuseColor={Color3.Green()} />
</box>
<box name='box-3' position={new Vector3(4, 0.5, 0)} cloneFrom='box-1' />
<ground name='ground' options={{ width: 10, height: 10 }}>
<standardMaterial name='ground-mat' diffuseColor={Color3.Gray()} />
</ground>
</>Learn More
For properties and additional context, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/mesh/interactions.
