5.3D オブジェクトの操作5. Interacting with 3D objects

このチュートリアルでは、コレクションの一部としての 3D オブジェクトの整理、基本操作のための境界ボックス、近距離操作と遠距離操作、手の追跡によるタッチやグラブ ジェスチャなど、基本的な 3D コンテンツとユーザー エクスペリエンスについて説明します。In this tutorial, you will learn about basic 3D content and user experience, such as organizing 3D objects as part of a collection, bounding boxes for basic manipulation, near and far interaction, and touch and grab gestures with hand tracking.

目標Objectives

  • 他の学習目的に使用される 3D オブジェクトのパネルを作成するCreate a panel of 3D objects which will be used for the other learning objectives
  • 境界ボックスを実装するImplement bounding boxes
  • 移動、回転、拡大縮小などの基本操作のための 3D オブジェクトを構成するConfigure 3D objects for basic manipulation such as move, rotate, and scale
  • 近距離操作と遠距離操作について確認するExplore near and far interaction
  • グラブやタッチなどのその他の手の追跡のジェスチャについて学習するLearn about additional hand tracking gestures, such as grab and touch

チュートリアルのアセットのインポートImporting the tutorial assets

Unity カスタム パッケージをダウンロードしてインポートします。Download and import the Unity custom package:

チュートリアルのアセットをインポートすると、プロジェクト ウィンドウは次のようになります。After you have imported the tutorial assets your Project window should look similar to this:

mrlearning-base

ヒント

Unity カスタム パッケージをインポートする方法については、「Mixed Reality ツールキットをインポートする」の手順を参照してください。For a reminder on how to import a Unity custom package, you can refer to the Import the Mixed Reality Toolkit instructions.

シーン ビューの整理Decluttering the scene view

シーンを簡単に操作できるようにするには、 Cube および ButtonCollection オブジェクトの左側にあるのアイコンをクリックして、それらのオブジェクトのシーンの可視性をオフに設定します。To make it easier to work with your scene, set the scene visibility for the Cube and ButtonCollection objects to off by clicking the eye icon to the left of the objects. これにより、ゲーム中の可視性を変更することなく、[Scene](シーン) ウィンドウ内のオブジェクトが非表示になります。This hides the object in the Scene window without changing their in-game visibility:

mrlearning-base

ヒント

シーンの可視性コントロールと、それらを使用してシーン ビューやワークフローを最適化する方法の詳細については、Unity の シーンの可視性に関するドキュメントを参照してください。To learn more about the Scene Visibility controls and how you can use them to optimize your scene view and workflow, you can visit Unity's Scene Visibility documentation.

コレクション内の 3D オブジェクトを整理するOrganizing 3D objects in a collection

このセクションでは、このチュートリアルの後続のセクションで 3D オブジェクトを操作するさまざまな方法を調べるときに使用する、3D オブジェクトのパネルを作成します。In this section, you will create a panel of 3D objects which you will use when exploring various ways of interacting with 3D objects in the following sections of this tutorial. 具体的には、3D オブジェクトが 3 x 3 グリッドに配置されるように構成します。Specifically, you will configure the 3D objects to be positioned on a 3 x 3 grid.

ボタンのパネルを作成したときと同様に、これを実現するための主な手順は次のとおりです。Similarly to when you created a panel of buttons, the main steps you will take to achieve this are:

  1. 3D オブジェクトを親オブジェクトにペアレント化するParent the 3D objects to a parent object
  2. Grid Object Collection (Script) コンポーネントを追加して構成するAdd and configure the Grid Object Collection (Script) component

1.3D オブジェクトを親オブジェクトにペアレント化する1. Parent the 3D objects to a parent object

[Hierarchy](階層) ウィンドウで 空のオブジェクトを作成し、適切な名前 (たとえば、3DObjectCollection) を付け、適切な場所 (たとえば、X = 0、Y = -0.2、Z = 2) に配置します。In the Hierarchy window, create an empty object, give it a suitable name, for example, 3DObjectCollection, and position it in a suitable location, for example, X = 0, Y = -0.2, Z = 2.

[Project](プロジェクト) ウィンドウで、 [Assets](アセット) > [MRTK.Tutorials.GettingStarted] > [Prefabs](プレハブ) に移動し、次のプレハブを 3DObjectCollectionペアレント化しますIn the Project window, navigate to Assets > MRTK.Tutorials.GettingStarted > Prefabs, then parent the following prefabs to the 3DObjectCollection:

  • CheeseCheese
  • CoffeeCupCoffeeCup
  • EarthCoreEarthCore
  • OctaOcta
  • PlatonicPlatonic
  • TheModuleTheModule

mrlearning-base

[Hierarchy](階層) ウィンドウで、3DObjectCollection の子オブジェクトとして 3 つのキューブを作成し、[Transform](変換) の [Scale](スケール) を X = 0.15、Y = 0.15、Z = 0.15 に設定します。In the Hierarchy window, create three cubes as a child objects of the 3DObjectCollection and set their Transform Scale to X = 0.15, Y = 0.15, Z = 0.15:

mrlearning-base

ヒント

上記の手順を実行する方法については、「ユーザー インターフェイスの作成と Mixed Reality ツールキットの構成」チュートリアルを参照してください。For a reminder on how to do the steps listed above, you can refer to the Creating user interface and configure Mixed Reality Toolkit tutorial.

各キューブが表示されるように、キューブを再配置します。Reposition the cubes so you can see each cube:

mrlearning-base

[Project](プロジェクト) ウィンドウで、 [Assets](アセット) > [MixedRealityToolkit.SDK] > [StandardAssets] > [Materials](素材) に移動し、MRTK で提供されている素材を確認します。In the Project window, navigate to Assets > MixedRealityToolkit.SDK > StandardAssets > Materials to see materials provided with the MRTK.

各キューブの [Mesh Renderer](メッシュ レンダラー) の [Materials](素材) の [Element 0](要素 0) プロパティに適切な素材をクリックしてドラッグします。次に例を示します。Click-and-drag a suitable material on to each cube's Mesh Renderer Materials Element 0 property, for example:

  • MRTK_Standard_GlowingCyanMRTK_Standard_GlowingCyan
  • MRTK_Standard_GlowingOrangeMRTK_Standard_GlowingOrange
  • MRTK_Standard_GreenMRTK_Standard_Green

mrlearning-base

2.Grid Object Collection (Script) コンポーネントを追加して構成する2. Add and configure the Grid Object Collection (Script) component

Grid Object Collection (Script) コンポーネントを 3DObjectCollection オブジェクトに追加し、次のように構成します。Add a Grid Object Collection (Script) component to the 3DObjectCollection object, and configure it as follows:

  • [Sort Type](並べ替えの種類)[Child Order](子の順序) に変更して、子オブジェクトが、親オブジェクトの下に配置した順序で並べ替えられるようにします。Change Sort Type to Child Order to ensure the child objects are sorted in the order you have placed them under the parent object

次に、 [Update Collection](コレクションの更新) ボタンをクリックして、新しい構成を適用します。Then click the Update Collection button to apply the new configuration:

mrlearning-base

3D オブジェクトの操作Manipulating 3D objects

このセクションでは、前のセクションで作成したパネル内のすべての 3D オブジェクトを操作する機能を追加します。In this section, you will add the ability to manipulate all the 3D objects in the panel you created in the previous section. またプレハブ オブジェクトの場合は、ユーザーが追跡対象の手を使用して、これらのオブジェクトに手を伸ばしてつかむことができるようにします。Additionally, for the prefab objects, you will enable users to reach out and grab these objects with tracked hands. 次に、オブジェクトに適用できる操作動作をいくつか確認します。Then you will explore a few manipulation behaviors that you can apply to your objects.

これを実現するための主な手順は次のとおりです。The main steps you will take to achieve this are:

  1. すべてのオブジェクトに Manipulation Handler (Script) コンポーネントを追加するAdd the Manipulation Handler (Script) component to all the objects
  2. プレハブ オブジェクトに Near Interaction Grabbable (Script) コンポーネントを追加するAdd the Near Interaction Grabbable (Script) component to the prefab objects
  3. Manipulation Handler (Script) コンポーネントを構成するConfigure the Manipulation Handler (Script) component

重要

オブジェクトを操作できるようにするには、オブジェクトに次のコンポーネントが必要です。To be able to manipulate an object, the object must have the following components:

  • Collider コンポーネント、たとえばボックス コライダーCollider component, for example, a Box Collider
  • Manipulation Handler (Script) コンポーネントManipulation Handler (Script) component

オブジェクトを操作し、追跡対象の手でオブジェクトをつかむことができるようにするには、オブジェクトに次のコンポーネントが必要です。To be able to manipulate and grab an object with tracked hands, the object must have the following components:

  • Collider コンポーネント、たとえばボックス コライダーCollider component, for example, a Box Collider
  • Manipulation Handler (Script) コンポーネントManipulation Handler (Script) component
  • Near Interaction Grabbable (Script) コンポーネントNear Interaction Grabbable (Script) component

1.すべてのオブジェクトに Manipulation Handler (Script) コンポーネントを追加する1. Add the Manipulation Handler (Script) component to all the objects

[Hierarchy](階層) ウィンドウで、 [Cheese] オブジェクトを選択し、Shift キーを押したまま [Cube () 2] オブジェクトを選択し、すべてのオブジェクトに Manipulation Handler (Script) コンポーネントを追加します。In the Hierarchy window, select the Cheese object, hold down the Shift key, and then select the Cube () 2 object and add the Manipulation Handler (Script) component to all the objects:

mrlearning-base

注意

このチュートリアルでは、コライダーが既にプレハブに追加されています。For the purpose of this tutorial, colliders have already been added to the prefabs. Cube オブジェクトなどの Unity プリミティブの場合、オブジェクトが作成されるときに Collider コンポーネントが自動的に追加されます。For Unity primitives, such as the Cube objects, the Collider component is automatically added when the object is created. 上の図では、コライダーは緑色のアウトラインで示されています。In the image above, the colliders are represented by the green outlines. コライダーの詳細については、Unity のコライダーに関するドキュメントを参照してください。To learn more about colliders, you can visit Unity's Collider documentation.

2.プレハブ オブジェクトに Near Interaction Grabbable (Script) コンポーネントを追加する2. Add the Near Interaction Grabbable (Script) component to the prefab objects

[Hierarchy](階層) ウィンドウで、 [Cheese] オブジェクトを選択し、Shift キーを押したまま [TheModule] オブジェクトを選択し、すべてのオブジェクトに Near Interaction Grabbable (Script) コンポーネントを追加します。In the Hierarchy window, select the Cheese object, hold down the Shift key, and then select the TheModule object and add the Near Interaction Grabbable (Script) component to all the objects:

mrlearning-base

3.Manipulation Handler (Script) コンポーネントを構成する3. Configure the Manipulation Handler (Script) component

既定の操作Default manipulation

Cube オブジェクトについて、既定の操作の動作を実行するために、すべてのプロパティを既定のままにします。For the Cube object, leave all properties at default, to experience the default manipulation behavior:

mrlearning-base

ヒント

コンポーネントを既定値にリセットするには、コンポーネントの [Settings](設定) アイコンを選択して [Reset](リセット) を選択します。To reset a component to its default values, you can select the component's Settings icon and select Reset.

操作をスケールのみに制限するRestrict manipulation to scale only

Cube (1) オブジェクトについて、 [Two Handed Manipulation Type](両手を使った操作の種類)[Scale](スケール) に変更し、ユーザーがオブジェクトのサイズのみを変更できるようにします。For the Cube (1) object, change Two Handed Manipulation Type to Scale to only allow the user to change the object's size:

mrlearning-base

移動をユーザーから一定の距離に制限するConstrain the movement to a fixed distance from the user

Cube (2) オブジェクトについて、 [Constraint On Movement](動きの制限)[Fix Distance From Head](頭部から一定の距離) に変更して、オブジェクトを移動したときに、それがユーザーから同じ距離を保つようにします。For the Cube (2) object, change Constraint On Movement to Fix Distance From Head so that when the object is moved, it stays at the same distance from the user:

mrlearning-base

既定のグラブ可能な操作Default grabbable manipulation

CheeseCoffeCup、および EarthCore オブジェクトについて、すべてのプロパティを既定のままにして、既定のグラブ可能な操作の動作を実行します。For the Cheese, CoffeCup, and EarthCore objects, leave all properties at default, to experience the default grabbable manipulation behavior:

mrlearning-base

遠距離操作機能を除去するRemove the ability of far manipulation

Octa オブジェクトについて、 [Allow Far Manipulation](遠距離操作を許可) チェック ボックスをオフにして、ユーザーが追跡対象の手を使用した場合のみオブジェクトを直接操作できるようにします。For the Octa object, un-check the Allow Far Manipulation checkbox to make it so the user can only interact with the object directly using tracked hands:

mrlearning-base

オブジェクトを中心を軸に回転させるMake an object rotate around its center

Platonic オブジェクトについて、 [One Hand Rotation Mode Near](片手回転モード - 近距離) および [One Hand Rotation Mode Far](片手回転モード - 遠距離)[Rotate About Object Center](オブジェクトの中心を軸に回転) に変更し、ユーザーがオブジェクトを 1 つの手で回転させたとき、オブジェクトが中心を軸に回転するようにします。For the Platonic object, change One Hand Rotation Mode Near and One Hand Rotation Mode Far to Rotate About Object Center to make it so when the user rotates the object with one hand, it rotates around the object's center:

mrlearning-base

オブジェクトを放した後も動作を続けるKeep movement after object is released

TheModule オブジェクトについて、Rigidbody コンポーネントを追加して物理的処理を有効にし、 [Use Gravity](重力を使用) チェックボックスをオフにして、オブジェクトが重力の影響を受けないようにします。For the TheModule object, add a Rigidbody component to enable physics, and then un-check the Use Gravity checkbox so the object is not affected by gravity:

mrlearning-base

Manipulation Handler (Script) コンポーネントに戻り、 [Release Behavior](解放動作)[Keep Velocity](速度を維持) および [Keep Angular Velocity](角速度を維持) の両方に設定されていることを確認し、オブジェクトがユーザーの手から離れた後も動き続けるようにします。Back on the Manipulation Handler (Script) component, verify that the Release Behavior is set to both Keep Velocity and Keep Angular Velocity so that once the object is released from the user's hand, it continues to move:

mrlearning-base

Manipulation Handler コンポーネントとその関連プロパティの詳細については、MRTK ドキュメントポータル操作ハンドラーに関するガイドを参照してください。To learn more about the Manipulation handler component and its associated properties, you can visit the Manipulation handler guide in the MRTK Documentation Portal.

境界ボックスの追加Adding bounding boxes

境界ボックスには、拡大縮小および回転に使用できるハンドルが用意されているため、1 つの手で、近距離と遠距離の両方のオブジェクトを操作するのがより簡単かつ直感的になります。Bounding boxes make it easier and more intuitive to manipulate objects with one hand for both near and far interaction by providing handles that can be used for scaling and rotating.

この例では、EarthCore オブジェクトに境界ボックスを追加して、前のセクションで構成したオブジェクト操作、および境界ボックスのハンドルを使用した拡大縮小と回転を使用して、このオブジェクトを操作できるようにします。In this example, you will add a bounding box to the EarthCore object so this object can now be interacted with using the object manipulation you configured in the previous section, as well as, scaled and rotated using the bounding box handles.

重要

境界ボックスを使用できるようにするには、オブジェクトに次のコンポーネントが必要です。To be able to use a bounding box, the object must have the following components:

  • Collider コンポーネント、たとえばボックス コライダーCollider component, for example, a Box Collider
  • Bounding Box (Script) コンポーネントBounding Box (Script) component

1.Bounding Box (Script) コンポーネントを EarthCore オブジェクトに追加する1. Add the Bounding Box (Script) component to the EarthCore object

[Inspector](インスペクター) ウィンドウで [EarthCore] オブジェクトを選択し、Bounding Box (Script) コンポーネントを EarthCore オブジェクトに追加します。In the Inspector window, select the EarthCore object and add the Bounding Box (Script) component to the EarthCore object:

mrlearning-base

注意

境界ボックスの視覚エフェクトは実行時に作成されるため、ゲーム モードに入る前は表示されません。The Bounding Box visualizations is created at run time and therefore not visible before you enter Game mode.

2.エディター内のシミュレーションを使用して境界ボックスを視覚化およびテストする2. Visualize and test the bounding box using the in-editor simulation

[Play](再生) ボタンを押してゲーム モードに入ります。Press the Play button to enter Game mode. 次に、スペースキーを押して保持することで手を表示し、マウスを使用して境界ボックスを操作します。Then press and hold the spacebar to bring up the hand and use the mouse to interact with the bounding box:

mrlearning-base

Bounding Box コンポーネントとその関連プロパティの詳細については、MRTK ドキュメントポータル境界ボックスに関するガイドを参照してください。To learn more about the Bounding Box component and its associated properties, you can visit the Bounding box guide in the MRTK Documentation Portal.

タッチ エフェクトの追加Adding touch effects

この例では、手でオブジェクトに触れたときにイベントがトリガーされるようにします。In this example, you will enable events to be triggered when you touch an object with your hand. 具体的には、ユーザーが触れたときにサウンド エフェクトが再生されるように Octa オブジェクトを構成します。Specifically, you will configure the Octa object to play a sound effect when the user touches it.

これを実現するための主な手順は次のとおりです。The main steps you will take to achieve this are:

  1. オブジェクトに Audio Source コンポーネントを追加するAdd an Audio Source component to the object
  2. オブジェクトに Near Interaction Touchable (Script) コンポーネントを追加するAdd the Near Interaction Touchable (Script) component to the object
  3. オブジェクトに Hand Interaction Touch (Script) コンポーネントを追加するAdd the Hand Interaction Touch (Script) component to the object
  4. On Touch Started イベントを実装するImplement the On Touch Started event
  5. エディター内のシミュレーションを使用してタッチ操作をテストするTest the touch interaction using the in-editor simulation

重要

タッチ イベントをトリガーできるようにするには、オブジェクトに次のコンポーネントが必要です。To be able to trigger touch events, the object must have the following components:

  • Collider コンポーネント、可能であればボックス コライダーCollider component, preferably a Box Collider
  • Near Interaction Touchable (Script) コンポーネントNear Interaction Touchable (Script) component
  • Hand Interaction Touch (Script) コンポーネントHand Interaction Touch (Script) component

注意

Hand Interaction Touch (Script) コンポーネントは MRTK の一部ではありません。The Hand Interaction Touch (Script) component is not part of MRTK. これはこのチュートリアルのアセットと共にインポートされ、もともとは Mixed Reality ツールキットの Unity の例の一部でした。It was imported with this tutorial's assets and originally part of the MixedReality Toolkit Unity Examples.

1.オブジェクトに Audio Source コンポーネントを追加する1. Add an Audio Source component to the object

[Hierarchy](階層) ウィンドウで、 [Octa] オブジェクトを選択し、Audio Source コンポーネントを Octa オブジェクトに追加します。次に、 [Spatial Blend](空間ブレンド) を 1 に変更して、空間オーディオを有効にします。In the Hierarchy window, select the Octa object, add an Audio Source component to the Octa object, and then change Spatial Blend to 1 to enable spatial audio:

mrlearning-base

2.オブジェクトに Near Interaction Touchable (Script) コンポーネントを追加する2. Add the Near Interaction Touchable (Script) component to the object

[Octa] オブジェクトが選択された状態で、Near Interaction Touchable (Script) コンポーネントを Octa オブジェクトに追加します。次に、 [Fix Bounds](境界の修正) および [Fix Center](センターの修正) ボタンをクリックして、Near Interaction Touchable (Script) の [Local Center](ローカルのセンター) および [Bounds](境界) のプロパティを BoxCollider に一致するように更新します。With the Octa object still selected, add the Near Interaction Touchable (Script) component to the Octa object, and then click the Fix Bounds and Fix Center buttons to update the Local Center and Bounds properties of the Near Interaction Touchable (Script) to match the BoxCollider:

mrlearning-base

3.オブジェクトに Hand Interaction Touch (Script) コンポーネントを追加する3. Add the Hand Interaction Touch (Script) component to the object

[Octa] オブジェクトを選択した状態で、Hand Interaction Touch (Script) コンポーネントを Octa オブジェクトに追加します。With the Octa object still selected, add the Hand Interaction Touch (Script) component to the Octa object:

mrlearning-base

4.On Touch Started イベントを実装する4. Implement the On Touch Started event

Hand Interaction Touch (Script) コンポーネントで、小さい + アイコンをクリックして、新しい On Touch Started () イベントを作成します。On the Hand Interaction Touch (Script) component, click the small + icon to create a new On Touch Started () event. 次に、イベントを受信するように Octa オブジェクトを構成し、トリガーされるアクションとして AudioSource.PlayOneShot を定義します。Then configure the Octa object to receive the event and define AudioSource.PlayOneShot as the action to be triggered:

mrlearning-base

[Assets](アセット) > [MixedRealityToolkit.SDK] > [StandardAssets] > [Audio](オーディオ) に移動して、MRTK で提供されているオーディオ クリップを表示します。次に、適切なオーディオ クリップ (MRTK_Gem オーディオ クリップなど) を [Audio Clip](オーディオ クリップ) フィールドに割り当てます。Navigate to Assets > MixedRealityToolkit.SDK > StandardAssets > Audio to see audio clips provided with the MRTK, and then assign a suitable audio clip to the Audio Clip field, for example, the MRTK_Gem audio clip:

mrlearning-base

ヒント

イベントを実装する方法については、「手の追跡のジェスチャと操作可能なボタン」の説明を参照してください。For a reminder on how to implement events, you can refer to the Hand tracking gestures and interactable buttons instructions.

5.エディター内のシミュレーションを使用してタッチ操作をテストする5. Test the touch interaction using the in-editor simulation

[Play](再生) ボタンを押してゲーム モードに入ります。Press the Play button to enter Game mode. 次に、スペースキーを押して保持することで手を表示し、マウスを使用して Octa オブジェクトに触れてサウンド エフェクトをトリガーします。Then press and hold the spacebar to bring up the hand and use the mouse to touch the Octa object and trigger the sound effect:

mrlearning-base

注意

タッチ操作のテスト時に見られるように、また上の図に示すように、Octa オブジェクトに触れている間、その色は脈打つように変化します。As you saw when testing the touch interaction, and as shown in the image above, the Octa object color pulsated while it was touched. このエフェクトは、前述の手順で実行したイベント構成の結果ではなく、Hand Interaction Touch (Script) コンポーネントにハード コーディングされています。This effect is hard coded into the Hand Interaction Touch (Script) component and not a result of the event configuration you completed in the steps above.

このエフェクトを無効にする場合は、たとえば 32 行目の 'TargetRenderer = GetComponentInChildren();' をコメントアウトすると、TargetRenderer が null のままになり、色は脈打つように変化しません。If you want to disable this effect, you can, for example, comment out or line 32 'TargetRenderer = GetComponentInChildren();' which will result in the TargetRenderer remaining null and the color not pulsating.

結論Congratulations

このチュートリアルでは、3D オブジェクトをグリッド コレクションに整理する方法と、近距離操作 (追跡対象の手で直接グラブ) と遠距離操作 (視線または手の光線を使用) を使用してこれらのオブジェクトを操作 (拡大縮小、回転、および移動) する方法を学習しました。In this tutorial, you learned how to organize 3D objects in a grid collection and how to manipulate these objects (scaling, rotating, and moving) using near interaction (directly grabbing with tracked hands) and far interaction (using gaze rays or hand rays). また、3D オブジェクトの周りに境界ボックスを配置する方法と、境界ボックスのハンドルの使用とカスタマイズの方法についても学習しました。You also learned how to put bounding boxes around 3D objects, and learned how to use and customize the handles on the bounding boxes. 最後に、オブジェクトにタッチしたときにイベントをトリガーする方法を学習しました。Finally, you learned how to trigger events when touching an object.

次のレッスン:6.高度な入力オプションの探索Next Lesson: 6. Exploring advanced input options