Skip to main content

Picking, gizmos and XR

  • Picking (babylon.pick, babylon.ray): shoot a ray into the scene, from the pointer or from any point in any direction, and learn the first mesh it hits, where and at what distance. It is how a click selects a part.
  • Gizmos (babylon.gizmo): the handles a person drags to move, rotate and scale an object, singly or all together through a gizmo manager, with their own events for when a drag starts, moves and ends.
  • XR (babylon.webXr): enter virtual or augmented reality from the browser, with controllers, teleportation and hit tests against the real world.

To react to the pointer, set a function with babylon.scene.onPointerDown, onPointerMove or onPointerUp, and pick inside it.

Every function​

Picking​

FunctionWhat it does
getBUReads the first barycentric coordinate of the hit inside its triangle, the weight of the triangle's second vertex, used to work out texture coordinates.
getBVReads the second barycentric coordinate of the hit inside its triangle, the weight of the triangle's third vertex, used to work out texture coordinates.
getDistanceReads how far along the ray the hit was, in scene units; meaningful only when hit is true.
getPickedMeshReads the mesh a pick hit; meaningful only when hit is true.
getPickedPointReads the point in the scene where a pick hit the mesh; meaningful only when hit is true.
getPickedSpriteReads the sprite a pick hit, when sprites rather than meshes were picked.
getSubMeshFaceIdReads the index of the triangle that was hit within its sub-mesh.
getSubMeshIdReads the index of the sub-mesh that was hit, for meshes split into several material sections.
hitTells whether a pick hit anything at all; check it before reading the mesh, point or distance.
pickWithPickingRayShoots a ray from the active camera through the pointer's current position and reports the first pickable mesh it hits, the way a click selects.
pickWithRayShoots a ray into the scene and reports the first pickable mesh it hits, with the hit point and distance; read the parts with the other methods here.

Rays​

FunctionWhat it does
createPickingRayBuilds a ray from the active camera through the pointer's current position on the canvas, the ray a click would pick with.
createRayBuilds a ray starting at origin and pointing along direction; length limits how far it reaches, and 0 or nothing leaves it unlimited.
createRayFromToBuilds a ray that starts at from, points toward to and is exactly as long as the distance between them.
getDirectionReads the direction a ray points in, as a unit vector.
getLengthReads how far a ray reaches; an unlimited ray reports a very large number.
getOriginReads the point a ray starts from, as a point in the scene.

Gizmos​

FunctionWhat it does
axisDragGizmo.getIsEnabledReads whether one axis arrow of a position gizmo is shown.
axisDragGizmo.setIsEnabledShows or hides one axis arrow of a position gizmo, so the mesh can be locked against moving along that axis.
axisScaleGizmo.getIsEnabledReads whether one axis handle of a scale gizmo is shown.
axisScaleGizmo.setIsEnabledShows or hides one axis handle of a scale gizmo, so the mesh can be locked against scaling along that axis.
base.getScaleRatioReads how large a gizmo's handles are drawn relative to the default size.
base.scaleRatioSets how large a gizmo's handles are drawn; 1 is the default size and 2 doubles it, whatever the attached mesh's size.
boundingBoxGizmo.createBoundingBoxGizmoObservableSelectorPasses through the name of a bounding box gizmo event as a typed selector for code that subscribes to gizmo events by name.
boundingBoxGizmo.getAxisFactorReads the drag sensitivity per axis of a bounding box gizmo.
boundingBoxGizmo.getFixedDragMeshBoundsSizeReads whether the handles of a bounding box gizmo are sized relative to the mesh bounds.
boundingBoxGizmo.getFixedDragMeshScreenSizeReads whether the handles of a bounding box gizmo keep a constant screen size.
boundingBoxGizmo.getFixedDragMeshScreenSizeDistanceFactorReads the camera distance at which a bounding box gizmo's handles appear at their world size.
boundingBoxGizmo.getIncrementalSnapReads whether a bounding box gizmo's scale snapping steps add up rather than multiply.
boundingBoxGizmo.getRotationSnapDistanceReads the angle step in radians a bounding box gizmo snaps rotation to, 0 meaning smooth rotation.
boundingBoxGizmo.getRotationSphereSizeReads the size of the rotation handles of a bounding box gizmo.
boundingBoxGizmo.getScaleBoxSizeReads the size of the scale handles of a bounding box gizmo.
boundingBoxGizmo.getScaleDragSpeedReads how fast a bounding box gizmo scales the mesh for a given drag.
boundingBoxGizmo.getScalePivotReads the pivot fractions a bounding box gizmo scales around.
boundingBoxGizmo.getScalingSnapDistanceReads the drag step a bounding box gizmo snaps scaling to, 0 meaning smooth scaling.
boundingBoxGizmo.setAxisFactorSets a separate drag sensitivity per axis for a bounding box gizmo, so scaling along one axis can respond faster or slower than the others.
boundingBoxGizmo.setFixedDragMeshBoundsSizeWhen true, the handles of a bounding box gizmo are sized relative to the bounds of the attached mesh instead of a fixed world size.
boundingBoxGizmo.setFixedDragMeshScreenSizeWhen true, the rotation spheres and scale boxes of a bounding box gizmo keep the same size on screen whatever the distance to the camera; it takes precedence over fixedDragMeshBoundsSize.
boundingBoxGizmo.setFixedDragMeshScreenSizeDistanceFactorSets the camera distance at which a bounding box gizmo's handles appear at their world size when fixedDragMeshScreenSize is on; the default is 10.
boundingBoxGizmo.setIncrementalSnapChooses how a bounding box gizmo's scale snapping steps combine: incremental steps add up, 1.1 then 1.2 then 1.3 for a step of 0.1, while the default multiplies, 1.1 then 1.21 then 1.33.
boundingBoxGizmo.setRotationSnapDistanceMakes a bounding box gizmo rotate the mesh in steps of rotationSnapDistance radians instead of smoothly; 0 turns snapping off.
boundingBoxGizmo.setRotationSphereSizeSets the size of the round rotation handles on a bounding box gizmo's edges.
boundingBoxGizmo.setScaleBoxSizeSets the size of the square scale handles on a bounding box gizmo's corners.
boundingBoxGizmo.setScaleDragSpeedSets how fast a bounding box gizmo scales the mesh for a given drag; 1 is the default.
boundingBoxGizmo.setScalePivotSets the point a bounding box gizmo scales the mesh around, as fractions of its bounds: [0.5, 0.5, 0.5] is the center and [0.5, 0, 0.5] the bottom; by default it scales from the opposite corner.
boundingBoxGizmo.setScalingSnapDistanceMakes a bounding box gizmo scale the mesh in steps of scalingSnapDistance scene units of drag instead of smoothly; 0 turns snapping off.
manager.attachToMeshShows the manager's enabled gizmos on a mesh so the user can manipulate it; any mesh attached before is released.
manager.createGizmoManagerCreates a gizmo manager with the chosen gizmos enabled: position arrows, rotation rings, scale handles and a bounding box.
manager.detachMeshHides the manager's gizmos by releasing the mesh they were attached to.
manager.getBoundingBoxGizmoReads the bounding box gizmo of a manager, the frame with corner handles for scaling and rotating, for tuning its handles and snapping; it exists only when bounding box gizmos are enabled.
manager.getPositionGizmoReads the position gizmo of a manager, the arrows that drag the mesh along an axis, for tuning its snapping and planes; it exists only when position gizmos are enabled.
manager.getRotationGizmoReads the rotation gizmo of a manager, the rings that turn the mesh around an axis, for tuning its snapping and sensitivity; it exists only when rotation gizmos are enabled.
manager.getScaleGizmoReads the scale gizmo of a manager, the handles that stretch the mesh along an axis, for tuning its snapping and sensitivity; it exists only when scale gizmos are enabled.
planeDragGizmo.getIsEnabledReads whether one plane handle of a position gizmo is shown.
planeDragGizmo.setIsEnabledShows or hides one plane handle of a position gizmo, so the mesh can be locked against sliding in that plane.
planeRotationGizmo.getIsEnabledReads whether one ring of a rotation gizmo is shown.
planeRotationGizmo.setIsEnabledShows or hides one ring of a rotation gizmo, so the mesh can be locked against turning around that axis.
positionGizmo.createPositionGizmoObservableSelectorPasses through the name of a position gizmo event, drag start, drag or drag end, as a typed selector for code that subscribes to gizmo events by name.
positionGizmo.getAttachedMeshReads the mesh a position gizmo is currently attached to.
positionGizmo.getAttachedNodeReads the node a position gizmo is currently attached to, which may be a transform node rather than a mesh.
positionGizmo.getIsDraggingTells whether the user is dragging a position gizmo right now.
positionGizmo.getPlanarGizmoEnabledReads whether a position gizmo shows its plane handles.
positionGizmo.getSnapDistanceReads the step size a position gizmo snaps to, 0 meaning smooth movement.
positionGizmo.getXGizmoReads the arrow of a position gizmo that drags along X, to enable or disable it on its own.
positionGizmo.getXPlaneGizmoReads the handle of a position gizmo that drags within the plane facing X, the YZ plane, to enable or disable it on its own.
positionGizmo.getYGizmoReads the arrow of a position gizmo that drags along Y, to enable or disable it on its own.
positionGizmo.getYPlaneGizmoReads the handle of a position gizmo that drags within the plane facing Y, the XZ plane, to enable or disable it on its own.
positionGizmo.getZGizmoReads the arrow of a position gizmo that drags along Z, to enable or disable it on its own.
positionGizmo.getZPlaneGizmoReads the handle of a position gizmo that drags within the plane facing Z, the XY plane, to enable or disable it on its own.
positionGizmo.planarGizmoEnabledShows or hides the square handles of a position gizmo that drag the mesh within the XY, YZ and XZ planes, in addition to the axis arrows.
positionGizmo.snapDistanceMakes a position gizmo move the mesh in steps of snapDistance scene units instead of smoothly; 0 turns snapping off.
rotationGizmo.createRotationGizmoObservableSelectorPasses through the name of a rotation gizmo event, drag start, drag or drag end, as a typed selector for code that subscribes to gizmo events by name.
rotationGizmo.getAttachedMeshReads the mesh a rotation gizmo is currently attached to, or null when none is.
rotationGizmo.getAttachedNodeReads the node a rotation gizmo is currently attached to, which may be a transform node rather than a mesh.
rotationGizmo.getSensitivityReads how far a rotation gizmo turns the mesh for a given drag.
rotationGizmo.getSnapDistanceReads the angle step in radians a rotation gizmo snaps to, 0 meaning smooth rotation.
rotationGizmo.getXGizmoReads the ring of a rotation gizmo that turns around X, to enable or disable it on its own.
rotationGizmo.getYGizmoReads the ring of a rotation gizmo that turns around Y, to enable or disable it on its own.
rotationGizmo.getZGizmoReads the ring of a rotation gizmo that turns around Z, to enable or disable it on its own.
rotationGizmo.sensitivitySets how far a rotation gizmo turns the mesh for a given drag; 1 is the default and higher values turn it faster.
rotationGizmo.snapDistanceMakes a rotation gizmo turn the mesh in steps of snapDistance radians instead of smoothly; 0 turns snapping off.
scaleGizmo.createScaleGizmoObservableSelectorPasses through the name of a scale gizmo event, drag start, drag or drag end, as a typed selector for code that subscribes to gizmo events by name.
scaleGizmo.getIncrementalSnapReads whether a scale gizmo's snapping steps add up rather than multiply.
scaleGizmo.getSensitivityReads how much a scale gizmo changes the scale for a given drag.
scaleGizmo.getSnapDistanceReads the step size a scale gizmo snaps to, 0 meaning smooth scaling.
scaleGizmo.getXGizmoReads the handle of a scale gizmo that stretches along X, to enable or disable it on its own.
scaleGizmo.getYGizmoReads the handle of a scale gizmo that stretches along Y, to enable or disable it on its own.
scaleGizmo.getZGizmoReads the handle of a scale gizmo that stretches along Z, to enable or disable it on its own.
scaleGizmo.sensitivitySets how much a scale gizmo changes the scale for a given drag; 1 is the default and higher values scale faster.
scaleGizmo.setIncrementalSnapChooses how a scale gizmo's snapping steps combine: incremental steps add up, 1.1 then 1.2 then 1.3 for a step of 0.1, while the default multiplies, 1.1 then 1.21 then 1.33.
scaleGizmo.snapDistanceMakes a scale gizmo change the scale in steps of snapDistance instead of smoothly; 0 turns snapping off.

XR​

FunctionWhat it does
simple.createDefaultXRExperienceWithTeleportationStarts a default WebXR experience in VR with teleportation over the given ground meshes, enough for simple walkthroughs; nothing is given back.
simple.createDefaultXRExperienceWithTeleportationReturnStarts a default WebXR experience in VR with teleportation over the given ground meshes, as createDefaultXRExperienceWithTeleportation does, and gives back the experience with the near menu, button and text it created plus a dispose function to end it.
simple.createImmersiveARExperienceStarts a default WebXR experience in immersive AR mode, showing the scene over the camera view of the room on a device that supports it.