1.4 - Sockets

Before making a functional hook for hats, you’ll first need some grabbable hats.

1. Some hats to your scene:

• Open the Course Library > Prefabs > Objects > Hats folder.
• Drag two hats you might want to wear onto a surface near the mirror.
• Note: If you do not already have a set of hooks in your scene, add one from the Course Library > Prefabs > Hooks folder.

2. Make the hats obey physics:

• Use Ctrl or Cmd to select both hats in the Hierarchy.
• Add Rigidbody components to the selected hat objects.
• Set the Collision Detection property to Continuous Dynamic to prevent them from falling through the ground.

3. Make the hats grabbable:

• Add XR Grab Interactable components to each hat.
• If you want, enable the Smooth Position and Smooth Rotation properties to reduce jitter.

4. Prepare for testing:

• Reposition and reorient the XR Rig to be in front of the mirror within reaching distance of the hooks and the hats.

You should now be able to successfully pick up the hats.

To be able to hang the hat on a hook, the hook will need to behave like a socket.

1. Position the socket correctly:

• In the Hierarchy, right-click the Hook object and create an Empty child object.
• Rename the child object “Socket 1”.
• Reposition the Socket 1 object to the tip of the hook, where the hat will rest.

2. Define the trigger detection area for the socket:

• Add a Sphere Collider component to the Socket object.
• Click the Edit Collider button and reduce the Radius to 0.1.
• Select the Is Trigger check box to prevent it from colliding with the hat.

3. Make the Socket 1 object behave like a socket:

• Add an XR Socket Interactor component to the object.

4. Make the hat point downwards when attached to the socket:

• Create an empty child object of Socket 1 and rename this child object “Attach”.
• Rotate the Attach object to face downward.
• Assign the Attach object to the Attach Transform property of the Socket Interactor component.
• Note: The local Z axis of the attach point should align with the desired forward direction of the hat and the local Y axis should align with its desired upward direction.

You should now be able to pick up and place any of your hats onto the socket you set up.

Now that you have one fully functional socket, you can duplicate it for the other hanging locations on the hook and have the hats start on hooks when the scene loads.

1. Create sockets for all the hanging locations:

• In the Hierarchy, duplicate the Socket 1 object two times.
• Rename the copied objects to “Socket 2” and “Socket 3”.
• Reposition the copied sockets for the other two hanging hook locations.

2. Have your hats start on the hooks by default:

• In each of the Socket object’s XR Socket Interactor components, assign one of your hats to the Starting Selected Interactable property.
• Note: If you only have 2 hats, one of the sockets should have “None” for its starting interactable property.

All 3 of your sockets should now be fully functional, with hats starting on the hooks at the start of the scene.

These hats and this mirror would really be wasted unless you could actually wear the hats on your head.

1. Position the head socket object correctly:

• In the Hierarchy, right-click XR Rig > Camera Offset > Main Camera and create an Empty child object.
• Rename this new child object “Socket”
• Set the Y Position of the Socket object to 0.1 so that the hat appears above your eyes.

2. Add a trigger detection area for the socket:

• Add a Sphere Collider component to the Socket object.
• Click the Edit Collider button and set the Radius property to 0.2.
• Select the Is Trigger check box.

3. Allow the hats to snap to this socket:

• Add an XR Socket Interactor component.

You should now be able to put the hats on your head and see how they look in the mirror.

You can currently put all objects on your head or on the hooks as if they were hats. You can use Interaction layers to control which objects can and cannot interact with each other.

1. Add a new layer for “Hats”:

• Select a hat object.
• In the XR Grabbable Interactable component, from the Interaction Layer Mask drop-down, select Add Layer.
• Add a new “Hats” layer in the first available empty slot.
• Note: Your hat will not yet be set to that layer. You have only created the layer at this point.

2. Put the hats on your new Hats layer:

• In the Hierarchy, select all of your Hat objects using Ctrl/Cmd + Click.
• In the XR Grab Interactable component, from the Interaction Layer Mask drop-down, select Nothing to clear the layers.
• From the drop-down, select your new Hats layer to enable only that layer.

3. Make sure the hook and head sockets can only interact with objects on the “Hats” layer:

• Set each of the hook and head socket objects’ Interaction Layer Masks property to only the Hats layer.

4. Make sure other objects cannot be used as hats:

• Select all of your other grabbable objects.
• From the Interaction Layer Mask drop-down, make sure only the Default layer is enabled.
• This will prevent them from interacting with any sockets on the Hats layer.

You should now only be able to put hats - and not any other grabbable objects - on your head and the hooks.

New Features:

• Added hats
• Hang hats on hooks
• Put hats on your head

New Concepts & Skills

• Socket interactors
• Triggers to detect interaction
• Interaction layer masks

Next Lesson:

• Audio and Haptics

If you want to further develop your skills, explore new concepts, and improve your project, check out some of the optional extension activities below.

Each one is tagged as [Easy], [Medium], [Difficult], or [Expert] and will also include a [Requires Programming] tag if some coding is required.

1. Add rearrangeable art [Medium]

Allow the user to swap the position of art hanging on the wall:

• To make a simple hook, create an empty object with a Socket Interactor component, then create a primitive cube child object, scaled and rotated appropriately, to represent the mesh.
• To make the pieces of art hang at the correct height, you may need to add an Attach Transform located at the position on the frame the art would hang from.

2. Add rearrangeable books [Difficult]

Add books to a bookshelf that can be rearranged neatly in any order the user wants:

• In order to get the books to appear at the orientation you want, try creating an empty object with the correct orientation, then making the book object a child object.