Nreal Airのアプリケーションを開発する 後編

目次

はじめに

こんにちは。HoloLensチームの道下です。

今回はNreal Airのアプリでオブジェクトの操作やUIを使ったインタラクションを紹介します。

本記事はUnityを使ったNreal Airのアプリを開発する手順の後半になります.

Nreal Air用の設定やビルドの方法はNreal Airのアプリケーションを開発する 前編で紹介しているため、省いて紹介します。良ければ前回と合わせてご覧ください。

開発環境(前編と同じ)

Windows10

NRSDK 1.8.0

UnUnity 2020.3.25f1

Cubeオブジェクトとのインタラクション

オブジェクトの情報を取得する

まずはCubeオブジェクトをクリックし、情報を取得してみましょう。

今回はスマホ(コントローラー)から伸びるRayを使って、オブジェクトの情報を取得します。

シーンに以下3つを配置します

  • NRCameraRig
  • NRInput
  • Cube

Cubeは実機確認時に立体感が出るように少し傾けておきます

次に「CubeInteraction.cs」を作成し、Cubeオブジェクトにアタッチします

using UnityEngine;
using UnityEngine.EventSystems;

public class CubeInteraction : MonoBehaviour, IPointerClickHandler
{
    public void OnPointerClick(PointerEventData eventData)
    {
        var ClickedObject = eventData.pointerPress;
        Debug.Log($"name : {ClickedObject.name}\\n" +
                  $"potision : {ClickedObject.transform.position} , " +
                  $"rotation : {ClickedObject.transform.rotation.eulerAngles}");
    }
}

シーンを実行し、RayをCubeに当てた状態で右下に表示されたNrealのコントローラーの操作エリアをクリックします。

コンソールにCubeのオブジェクト名、位置、回転の情報が表示されます。

これで、ユーザーの入力からCubeオブジェクトの情報を取得することができました。

オブジェクトを回転させる

情報を取得するだけでは面白さに欠けるので、クリックしたオブジェクトを回転させてみましょう

先ほど作成したスクリプトを書き換えていきます。

using UnityEngine;
using UnityEngine.EventSystems;

public class CubeInteraction : MonoBehaviour, IPointerClickHandler
{
    // 回転角度
    [SerializeField] private float angle = 90f;
    // 回転方向 Vector3.leftは-x軸回転
    [SerializeField] private Vector3 axis = Vector3.left;
    // 回転速度
    [SerializeField] private float speed = 3f;

    private Quaternion targetRotation;

    private void Start()
    {
        targetRotation = this.transform.rotation;
    }
    public void OnPointerClick(PointerEventData eventData)
    {
        // 角度を設定する
        targetRotation = Quaternion.AngleAxis(angle, axis) * transform.rotation;
    }

    private void Update()
    {
        transform.rotation = Quaternion.Lerp(transform.rotation, targetRotation, Time.deltaTime * speed);
    }
}

シーンを実行し、RayをCubeに当てた状態で右下に表示されたNrealのコントローラーの操作エリアをクリックします。

Cubeオブジェクトが-x軸方向に90度ずつ回転します

また、インスペクタからAngleやAxisを変更すると、様々な角度や回転方向に回転させることなどができますので、ぜひ試してみてください。

これで、Cubeオブジェクトを回転させることが出来ました。

Cubeオブジェクトとのインタラクションに関しては以上です。

UIとのインタラクション

UIを操作する

先ほどはCubeオブジェクトに対応した情報の取得、操作を行いました。

ここでは、Unityが用意しているuGUIを操作していきます。シーンは先ほどのCubeを操作したシーンをそのまま使います。

まず、シーン上にボタンを配置します。

ボタンを作成するとCanvasが自動で生成されます。次にこのCanvasをNreal Airで操作できるように設定を変更していきます。

CanvasをWorld Spaceに設定する

CanvasのRender ModeをWorldSpaceに変更します。

その後、CanvasのRectTransformを以下のように変更してUIを目の前に移動させます

CanvasのGraphic Raycasterを削除してCanvas Raycast Target をアタッチする

Graphic RaycasterをRemoveし、AddComponentからCanvas Raycast Targetをアタッチします。

シーンを実行し、Rayをボタンの近くに移動させると、ボタンを押せることが確認できます。

UIからCubeオブジェクトを操作する

最後にボタンを押すことでオブジェクトを回転させてみましょう。

現状だとボタンとCubeオブジェクトが被っているので、下記のように少し移動させておきます。

では、ボタンクリックでCubeオブジェクトが回転するようにスクリプトを書き換えていきます。

using UnityEngine;
using UnityEngine.UI;

public class CubeInteraction : MonoBehaviour
{
    // 回転角度
    [SerializeField] private float angle = 90f;
    // 回転方向 Vector3.rightは-x軸回転
    [SerializeField] private Vector3 axis = Vector3.left;
    // 回転速度
    [SerializeField] private float speed = 3f;
    // ボタン
    [SerializeField] private Button button = null;

    private Quaternion targetRotation;

    private void Start()
    {
        targetRotation = this.transform.rotation;

        button.onClick.AddListener(() =>
        {
            // 角度を設定する
            targetRotation = Quaternion.AngleAxis(angle, axis) * transform.rotation;
        });
    }

    void Update()
    {
        transform.rotation = Quaternion.Lerp(transform.rotation, targetRotation, Time.deltaTime * speed);
    }
}

シーンを実行してボタンを押すと、Cubeが回転することが確認できます。

UIとのインタラクションに関しては以上です。

ビルドして実機で確認する

アプリをビルドしてNreal Airで確認します。ビルドの手順は前編をご覧ください

おわりに

前後編に分けてNreal Airのアプリ開発について紹介してきました。

今回はユーザーの入力からオブジェクトを操作することで、前回よりMRな体験ができました。

今後もNreal Air含め様々なデバイスを調査していこうと考えております。

よかったらシェアしてください

この記事を書いた人

目次
閉じる