First Person Attached Object

In this guide, I’ll show you how to create a first person object attached to the camera. The object loosely follows the camera using smoothing. This makes the object feel more realistic, like it’s being held in the user’s hand. To accomplish this, we’ll be using a script called AttachToObject.

First, if you’re not using a template, we need to create a gyroscope enabled project. Create an empty project by selecting “File -> New Project” from the menu bar. Then, select the Camera object in the Objects panel. With the camera selected, in the Inspector panel select “Add Component -> Gyroscope” and then check “Invert” on the added Gyroscope component.

Then, we need to add an empty object and make it a child of the Camera object. This will be your object’s attachment point. Then, add your first person object (e.g. a Wand). Note, your first person object should not be a child of the camera.

Then, add the following script to your project. The script should be called “AttachToObject”.

// -----JS CODE-----
// @input SceneObject attachTo
// @input bool smoothPosition = true
// @input float posSmoothing = 1.0
// @input bool smoothRotation = false
// @input float rotSmoothing = 1.0

if( !script.initialized ) {

    script.objectTransform = script.getTransform();
    script.attachToTransform = script.attachTo.getTransform();

    // Initialize first frame to attach rotation and position
    script.objectTransform.setWorldPosition( script.attachToTransform.getWorldPosition() );
    script.objectTransform.setWorldRotation( script.attachToTransform.getWorldRotation() );

    script.initialized = true;
}

if( script.smoothPosition ) 
{
    var currentPosition = script.objectTransform.getWorldPosition();
    var lerpedPosition = vec3.lerp( currentPosition, script.attachToTransform.getWorldPosition(), script.posSmoothing * getDeltaTime() );

    // Set object's position to lerped position
    script.objectTransform.setWorldPosition( lerpedPosition );
}
else
{
    // If turned off, take position directly
    script.objectTransform.setWorldPosition( script.attachToTransform.getWorldPosition() );
}

if( script.smoothRotation ) 
{
    var currentRotation = script.objectTransform.getWorldRotation();
    var lerpedRotation = quat.slerp( currentRotation, script.attachToTransform.getWorldRotation(), script.rotSmoothing * getDeltaTime() );
 
    // Set object's rotation to slerped rotation
    script.objectTransform.setWorldRotation( lerpedRotation ); 
}
else
{
    // If turned off, take rotation directly
    script.objectTransform.setWorldRotation( script.attachToTransform.getWorldRotation() ); 
}

Add this script to the object you want to attach to the attachment point (e.g. the Wand) and bind it to the “FrameUpdated” event. Once the script has been added, set the “Attach To” field to your attachment point. You can then configure if you want the position and rotation to be smoothed and the smoothing factor for each.

Next, you can tune your attachment point’s position and rotation. You’ll be able to see the attachment happening in real time in the Preview panel.

The object will now be loosely attached to the camera giving you a more realistic first person attached object.