デコシノニッキ

ホロレンジャーの戦いの記録

MR Learning Base Module で学ぶHoloLens 2アプリ開発 その4 3Dオブジェクトインタラクション

※ この記事は2019/02/26時点のものを参考に書いています

www.tattichan.work

その4ではいよいよオブジェクトとインタラクションしていきます。

Instructions

コレクション内の3Dオブジェクトの整理

1.ヒエラルキーで右クリックを押して"create empty"で空のGameObjectを作成し,"3DObjectCollection"とリネームします。ここが全ての3Dオブジェクトを配置していく場所になります。コレクションの場所がx=0, y=0, z=0にあることを確認してください


f:id:haikage1755:20190501231326p:plain:w450

2.Lesson1と同じ手順でこちらからUnityPackageをダウンロードし,プロジェクトにインポートします

3.Coffee cup prefabを選択してください(元の3Dモデルを表す似ているアイコンがあるので注意してください)


f:id:haikage1755:20190501231700p:plain:w450

4.Coffee cup prefabを"3DObjectCollection"の下にドラッグアンドドロップで配置してください


f:id:haikage1755:20190501231846p:plain:w450

5.更に3D オブジェクトをシーンに追加していきます。同様の手順で下記オブジェクトを"3DObjectCollection"の下に配置します。この時,各オブジェクトのスケールはまちまちなので数値をもとに調整してください

オブジェクト名 大きさ
TheModule_BaseModuleIncomplete x = 0.03, y = 0.03, z = 0.03
Octa_BaseModuleIncomplete x = 0.13. y = 0.13, z =0.13
EarthCore_BaseModuleIncomplete x = 50.0 y = 50.0, z = 50.0
Cheese_BaseModuleIncomplete x = 0.05, y = 0.05, z = 0.05
Model_Platonic_BaseModuleIncomplete x = 0.13, y = 0.13, z = 0.13
CoffeeCup_BaseModuleIncomplete default

6.Cubeを3つ追加し,"3DObjectCollection"の下に配置します。各スケール値はx = 0.14, y = 0.14, and z = 0.14にしてください。

7.Lesson2と同じようにGridObjectCollectionを使用して,コレクションを整理して3 x 3のグリッドを形成します。


f:id:haikage1755:20190501234152p:plain:w450

3D Objectを操作する

1.CubeをManipulate(操作)できるようにします。次の手順を踏んでいきます

  • ヒエラルキーから操作したいオブジェクトを選択する
  • Add Componentを押す
  • "manipulation"で検索する
  • "Manipulation Handler"を選択する
  • "3DObjectCollection"直下の全てのオブジェクト全てに同じことをする(3DObejctCollection自身は除く)
  • 全ての3Dオブジェクトにcolliderまたはbox colliderがついていることを確認する(Add Component > Box collider)


f:id:haikage1755:20190501234651p:plain:w450

2.1つのCubeは拡縮だけできるように制限します。Cubeを選択し,Inspectorパネルの"Two Handed Manipulation Type"のドロップダウンリストから"Scale"を選択します。これでユーザはCubeの大きさを変更できるようになります


f:id:haikage1755:20190501234937p:plain:w450

3.各Cubeの色を区別できるように変更します

  • ProjectパネルからMixed Reality Toolkit SDKを選択し展開します
  • "Standard Assets"フォルダを開きます
  • "materials"フォルダをクリックします
  • それぞれ違うmaterialをcubeにドラッグアンドドロップしてください


f:id:haikage1755:20190501235149p:plain:w450

4.別のCubeを選択し,頭から等距離で移動できるようにします。"Constraint on Movement"を"Fix Distance From the Head"に設定します。これでCubeはユーザの視野内でしか操作ができなくなります。


f:id:haikage1755:20190501235811p:plain:w450

続いて3Dオブジェクトを掴んでインタラクションできるようにします

5.Cheese(チーズ)オブジェクトを選択し,"Add Component"を押します
6."Near Interaction Grrabable"を検索,選択します。"Allow Far Manipulation"を無効にしない限りは,オブジェクトを遠くからも操作できます


f:id:haikage1755:20190502002555p:plain:w450

7."Near Interaction Grabbable"を同様に,Octa object, Platonic object, earth core, lunar module, coffee cupに追加します

8.Octaから遠方からの操作をできないようにします。Octaを選択し,“Allow far manipulation”を無効にします。これで,Octaオブジェクトは直接手でインタラクションしかできないようになります

9.”Near Interaction Grababble” コンポーネントがEarth core, the lunar module それとCoffee cupに追加されているのを確認します

10.Lunar Moduleを図に示すように,遠近両方のインタラクションでオブジェクトを中心として回転できるようにManipulation Handlerの設定を変更します


f:id:haikage1755:20190502003751p:plain:w450

11.Earth Coreは,手を離した時の動作を"Nothing"にします。これにより,Earth Coreがユーザの把持から解放されると,移動し続けることはなくなります


f:id:haikage1755:20190502010733p:plain:w450

Bounding Boxを追加する

Bounding Boxは使うと,直接操作と光線ベースの操作(遠距離操作)の両方で,片手でオブジェクトを操作することがより直観的になります

1.Earth coreオブジェクトにbox colliderが付いていない場合は追加します。下図のように,box colliderをEarth coreの下の"node id30"に追加します。node id30を選択し,InspectorのAdd ComponentからBox Colliderを選択します


f:id:haikage1755:20190502011241p:plain:w450

f:id:haikage1755:20190502011258p:plain:w450

f:id:haikage1755:20190502011333p:plain:w450

2.Bounding BoxをEarth coreのnode id30に追加します。node id30を選択し,InspectorのAddComponentから"Bounding Box"を検索,選択します。

3.Bounding Boxの"Behaviour"セクションで,Activation ドロップダウンリストから"Activate on Start"を選択します。その他のオプションについてはこちらを参照してください。

続いて,デフォルト,掴んでいるときのBoundingBoxを調整して,外観を変更します。

4.ProjectからBoundingBoxを検索し,青い球のアイコン(マテリアルのアイコン)の一覧を表示します

5."BoundingBox"マテリアルをBoundingBoxコンポーネントのBox materialにドラッグします。また,"BoundingBoxGrabbed"マテリアルをBoundingBoxコンポーネントのBoxGrabbed materialにセットします

6.“MRTK_BoundingBox_ScaleWidget”をScale Handle Prefabにセットします

7."MRTK_BoundingBox_RotateWidget"をRotation Handle Prefabにセットします

f:id:haikage1755:20190502020611p:plain:w450

8.BoundingBoxが正しいオブジェクトをターゲティングしていることを確認してください。BoundinBoxコンポーネントには"Target Object"と"Bounds Override"があります。Bounding Boxがあるオブジェクトを必ず両方のスロットにドラッグしてください。この例では下の図に示すように, "node_id30"オブジェクトをこれら両方のスロットにドラッグします。

アプリケーションを起動または再生すると,オブジェクトは青枠で囲まれます。この青枠の角をドラッグしてオブジェクトのサイズを変更できます。拡縮ハンドルと回転ハンドルを大きくして見やすくしたい場合は,デフォルトのBoundingBoxの設定を使用することをおすすめします(4-7の手順を踏まない)


f:id:haikage1755:20190502020649p:plain:w450

9.デフォルトのBoundingBoxのビジュアライゼーションに戻すには,BoundingBoxのオブジェクトのInspectorパネルのPrefabを選択してDeleteキーを押します。すると,図のようなBoundingBoxが表示されます(再生モードの時のみ)


f:id:haikage1755:20190502021118p:plain:w450

タッチエフェクトを追加する

この例では,手で物に触れると効果音がなるようになります

1.GameObjectにAudioSourceコンポーネントを追加します。"Octa"オブジェクトを選択し,Add ComponentからAudioSourceを選択します。このオーディオソースを利用して効果音を再生します

2."Near Interaction Touchable"コンポーネントを追加します。"Add Component"から,"Near Interaction Touchable"を選択し,追加します


f:id:haikage1755:20190502021552p:plain:w450

3."Hand Interaction Touch"を追加します。このスクリプトはデモパッケージの一部としてインポートしたUnitySceneに含まれているもので,MRTKには含まれていないことに注意してください。Add Componentから"Hand Interaction Touch"を追加してください。

  • "On Touch Completed": オブジェクトに手を触れ離した時
  • "On Touch Started": オブジェクトに手を触れたとき
  • "On Touch Updated": オブジェクトに手を触れている間

4."On Touch Started"の"+"ボタンを押して,Octaオブジェクトをフィールドにドラッグしてください
5."No Function"のドロップダウンリストから,AudioSource> PlayOneShotを選択します。以下のコンセプトを元に,オーディオクリップを追加します。

  • MRTKはAudioClipの小さなリストを提供します。"MixedRealityToolkit.SDK"ファルダの"StarndardAssets"の"Audio"にオーディオクリップの一覧があります
  • この例では"MRTK_Gem"を使います
  • AudioSource.PlayOneShotにドラッグしてください

これでユーザが手を伸ばしてOctaオブジェクトに触れると,オーディオ "MRTK_Gem"が再生されます。"Hand Interaction Touch"は触れたときのオブジェクトの色も調整します。

www.tattichan.work

[デコシノニッキ]は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。」