Drag and Drop & Grab

Draggable and Grabbable Items

An item can be set up to be draggable, that means the user can pick it up and drop it somewhere else.

This is achieved by editing the properties under Drag Drop Settings, in the editable fields of an item. It has a variety of different properties that will result in different behaviors.

It is recommended to enable the Cast shadows property for draggable items to make it easier for a user to judge the position and distance of the item.


Examples:

Here is a quick demo for Lockout / Tagout.

You can try it out here https://app.learnbrite.com/dashboard/spaces/visit/spc40fa043045d9307a190a04 

Drop Zones

Drop zones are physical areas which define where an object can be dropped. When they are set up and linked to an item, the item will only be able to be dropped on that zone.

Setting an item as draggable

In the item’s editable fields window, you will have access to the Drag Drop Settings panel, which has the following options:

Property name

Type

Description

Default value

draggable

bool

Turns the object draggable, which means it can be picked up by longpress and dropped by a single click.

FALSE

dropZoneTags

string

Tags are used to match drop zones with draggable objects. Objects and drop zones are linked together when they have the same tags.

dragTriggerEvents

string

Input Event that will trigger the pick up behavior for the object. Available values are:

  • longpress
  • squeezestart
  • tap

longpress,
squeezestart

stickToSurfaces

bool

When this is enabled, while the object is picked up, it will be projected onto the surface the Input Ray is looking at.

FALSE

lockedIntoZoneName

string

By setting the name of an existing drop zone as value for this field, this object will be constrained to only move across the surface of that drop zone.

dragPermissions

string

Roles with permission to pick the object up. If empty, anyone can pick the object up.

allowDropCancel

bool

If enabled, the object will return to its original position when dropped on an incorrect place. If disabled, the object can’t be dropped anywhere else but the correct drop zone. This only affects objects that have dropZoneTags set up.

TRUE

stickToAnyDropZone

bool

If enabled, the picked up object will perform the sticky magnetic effect on any drop zone (even the ones that don’t have the same drop zone tags) when over it.

FALSE

allowMovingInZAxis

bool

If enabled, the object can be moved along the Input Ray’s Z axis using the mouse wheel or the Y axis of the controller.

TRUE

initialZDistance

number

Initial distance from ray origin (hand), in percentage (value goes from 0 to 1). 0 means the object sits on the hand, 1 means the object is projected onto surfaces.

rayMatrix

Matrix4

Transform Matrix that applies to the object when it’s been moved along the ray’s Z-axis. This applies when ZDistance is higher than 0 but lower than 1 (object is in mid air).

gripMatrix

Matrix4

Transform Matrix that applies to the object when it’s on the hand (ZDistance is 0). By default, this represents the right hand. If nothing else is specified, this matrix will be mirrored on the left hand. Optionally, specific values for the left hand can be set by using the property gripMatrixL.

stickMatrix

Matrix4

Transform Matrix that applies to the object when it’s over a drop zone

{"draggable":true,"dropZoneTags":"myDropZone1","dragTriggerEvents":"tap","stickToSurfaces":true,"lockedIntoZoneName":"myDropZone1","allowMovingInZAxis":false,"stickMatrix":"[1, 0, 0, 0, 0, 0, -1, 0, 0, 1, 0, 0, 0, 0, 0, 1]"}

Creating a Drop Zone

Any object can be set as a drop zone. Usually it’s recommended to use a transparent plane to help you define where the object will be dropped.

In the editable fields window, you will have access to the Drag Drop Settings panel, which has the following options:

Property name

Type

Description

Default value

dropZone

bool

Turns the object into a drop zone, which means draggable objects can be placed on top of it.

FALSE

dropZoneTags

string

Tags are used to match drop zones with draggable objects. Objects and drop zones are linked together when they have the same tags.

dropZoneMatrix

Matrix4

Transform Matrix that applies to objects over the drop zone. This is compatible with the property stickMatrix for draggable objects. dropZoneMatrix is applied first.

{"dropZone":true,"dropZoneTags":"myDropZone1"}

Drag and Drop Methods

Fixed Distance Mode

User picks the object, distance from object to hand is locked, object can be moved around and dropped. It uses collisions.

Enhancement: User can bring object closer / far away using another control (mouse wheel, joystick,etc) – useful to place objects in 360

Reach Mode

User with a VR controller can pick up objects only within their reach as usually done in VR experiences. Distance from object to hand is also fixed.

The object marked with this drag method will highlight when the vr hand collides with it.

“Attraction” Method

Object moves to the hand when it’s selected. Useful to examine them and leave them where they were. Use the “Fixed Distance” method to “bring an item closer” by using the parameters allowMovingInZAxis and initialZDistance.

Wear/use mode

When picked up, the object is “in use” by the player. Example: A torch. That means the user doesn’t need to hold the button anymore and the object would be attached to the hand. Clicking again would activate the object. (A torch would light up, spray will paint, etc)

This method can be achieved by bringing the object closer to your body (like the spheres you bring closer to teleport to another environment). -> This can’t be done in 2D.

All-In-One mechanic (configurable)

Single click activates the object (classic onclick feature already available).

If the object is marked as “draggable”, Long click activates Fixed Distance Drag. If we’re in VR and the hand is colliding, then it’s the classic “pick up” feature described in the “Reach” mode.

If the object is marked as draggable and it doesn’t have an onclick action, a single click can also start the drag mode.

At this point object is in drag mode (Fixed Distance mode)

The object can be dropped by releasing the primary button

If the object is far away, a small 3D caption is shown above the object letting the user know that a secondary action is available:

  • in VR it says “Squeeze to bring closer”.
  • in 2D it says: “Right click to bring closer”.

If the secondary action is triggered, the object goes directly to the hand, which would take us to Reach Mode

If the mouse wheel / controller joystick feature to move the object far away/closer to us is enabled, that is also another way to activate Reach Mode.

Remember that if the object was already within reach (closer to the hand), Fixed Distance mode will be skipped and we’ll get directly to reach mode.

Once in Reach Mode

If the user releases the primary button, the object will be dropped in the position that it is in that moment.

if the object is “wearable”, we show another caption:

  • in VR: “Squeeze to use”
  • in 2D: “Right click to use”

If the user triggers the secondary action then the object is now activated as a wearable item owned by the user

Once in Wearable mode

At this point the user can release the primary button and further clicks will execute actions defined for the object (like turning on a torch).

The user can’t click on anything else since it’s “using” the current object.

Another caption will be shown:

  • in VR: “Click to activate, Squeeze to drop”
  • in 2D: “Click to activate, Right-click to drop”

Secondary interaction will drop the object.

Drag and Drop Zones

As an additional mechanic, objects can be locked into drop zones. That means the object can only be dropped in a drop zone. It would teleport back to its original position if dropped outside a drop zone.

Drop zones can optionally use tags. This is useful to place different kinds of objects in different places.

Trigger zones

Similar to drop zones, trigger zones would be colliders to detect that some object is inside it. This is useful for interactivity, such as using a tool upon another object.

Example: The user picks up a screwdriver, moves it into a machine that they need to repair, and the machine glows indicating that the user needs to press the button. Then the “repair” action takes place.

Note: Trigger zone functionality currently available only through scripting.

Buttons / Interaction

In order to be consistent across all devices the platform does not count on controllers having more than 1 button. When the device only has one primary button (like gaze or touchscreen) only the first drag method will be able to be used.

Multiuser

Object movement should always be transmitted through multiuser. However changes in draggable items positions will not persist (their new positions won’t be saved for when you revisit).

If an object is picked up by a user, other users are not be able to interact with it.

How useful was this article?

Click on a star to rate it!

We are sorry that this article was not useful for you!

Let us improve this article!

Tell us how we can improve this article?