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, |
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 able to interact with it.