{"id":4424,"date":"2022-11-27T21:04:00","date_gmt":"2022-11-27T21:04:00","guid":{"rendered":"https:\/\/dongyoonpark.com\/?p=4424"},"modified":"2024-10-14T03:20:52","modified_gmt":"2024-10-14T03:20:52","slug":"mrtk-101-how-to-use-crucial-spatial-interactions-and-ui-for-ar-vr-xr-hololens-oculus-quest-openvr-openxr","status":"publish","type":"post","link":"https:\/\/mixedrealitynow.com\/ko\/mrtk-101-how-to-use-crucial-spatial-interactions-and-ui-for-ar-vr-xr-hololens-oculus-quest-openvr-openxr","title":{"rendered":"MRTK 2 &#8211; How to build crucial Spatial Interactions"},"content":{"rendered":"<h2 class=\"wp-block-heading\" id=\"9c33\" style=\"font-size:20px\">Learn how to use MRTK to achieve some of the most widely used common interaction patterns in Mixed Reality This article is based on&nbsp;<a href=\"https:\/\/github.com\/microsoft\/MixedRealityToolkit-Unity\/releases\" rel=\"noopener\" target=\"_blank\">MRTK 2.x release<\/a>&nbsp;<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"MRTK-Unity (Mixed Reality Toolkit) 2.6.0 Release\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/qfONlUCSWdg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>MRTK-Unity is a Microsoft-driven project that provides a set of components and features, used to accelerate cross-platform MR app development in Unity. MRTK is available for Unity and Unreal. In this article, we will focus on MRTK-Unity.<\/p>\n\n\n\n<p id=\"4362\">MRTK-Unity is a Microsoft-driven project that provides a set of components and features, used to accelerate cross-platform MR app development in Unity. MRTK is available for Unity and Unreal. In this article, we will focus on MRTK-Unity.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1050\" height=\"316\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_RBcd2joD4JF9oyWN-vuQgw.png\" alt=\"\" class=\"wp-image-4796\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_RBcd2joD4JF9oyWN-vuQgw.png 1050w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_RBcd2joD4JF9oyWN-vuQgw-300x90.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_RBcd2joD4JF9oyWN-vuQgw-1024x308.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_RBcd2joD4JF9oyWN-vuQgw-768x231.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How to simulate input interactions in Unity editor?<\/li>\n\n\n\n<li>How to grab and move an object?<\/li>\n\n\n\n<li>How to resize an object?<\/li>\n\n\n\n<li>How to move or rotate an object with precision?<\/li>\n\n\n\n<li>How to make an object respond to input events?<\/li>\n\n\n\n<li>How to add visual feedback?<\/li>\n\n\n\n<li>How to add audio feedback?<\/li>\n\n\n\n<li>How to use HoloLens 2 style button prefabs?<\/li>\n\n\n\n<li>How to make an object follow you?<\/li>\n\n\n\n<li>How to make an object face you?<\/li>\n<\/ul>\n\n\n\n<p id=\"af4a\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5991\">How to simulate input interactions in Unity editor?<\/h2>\n\n\n\n<p id=\"1298\">MRTK supports in-editor input simulation. Simply run your scene by clicking Unity\u2019s play button. Use these keys to simulate input.<\/p>\n\n\n\n<p id=\"06cc\">With MRTK\u2019s input simulation, you can design and test experiences without the devices. This helps you quickly iterate ideas and prototypes.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Press&nbsp;<strong>W, A, S, D, Q, E<\/strong>&nbsp;keys to move the camera.<\/li>\n\n\n\n<li>Hold the&nbsp;<strong>Right mouse button<\/strong>&nbsp;and move the mouse to look around.<\/li>\n\n\n\n<li>To bring up the simulated hands, press&nbsp;<strong>Space bar<\/strong>(Right hand) or&nbsp;<strong>Left Shift key<\/strong>(Left hand)<\/li>\n\n\n\n<li>To keep simulated hands in view, press&nbsp;<strong>T<\/strong>&nbsp;or&nbsp;<strong>Y<\/strong>&nbsp;key<\/li>\n\n\n\n<li>To rotate simulated hands, press and hold the&nbsp;<strong>Ctrl&nbsp;<\/strong>key and move the mouse<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><a href=\"https:\/\/learn.microsoft.com\/en-us\/windows\/mixed-reality\/mrtk-unity\/mrtk2\/features\/input-simulation\/input-simulation-service?view=mrtkunity-2022-05\" target=\"_blank\" rel=\"noopener\"><strong>Input Simulation Service &#8211; Mixed Reality Toolkit<\/strong><\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"MRTK Input Simulation\" src=\"https:\/\/player.vimeo.com\/video\/565137176?dnt=1&amp;app_id=122963\" width=\"640\" height=\"360\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">MRTK\u2019s Input simulation in the Unity editor<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6f88\">How to grab and move an object?<\/h2>\n\n\n\n<p id=\"17b4\">To make an object grabbable, assign these two scripts:&nbsp;<strong>ObjectManipulater<\/strong>.cs and&nbsp;<strong>NearInteractionGrabbable<\/strong>.cs(for direct grab with articulated hand tracking input) ObjectManipulator supports both near and far interactions. You can grab and move an object with HoloLens 2\u2019s articulated hand tracking input(near), hand ray(far), motion controller\u2019s beam(far), HoloLens gaze cursor &amp; air-tap(far).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1050\" height=\"655\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_X8xVGgaJcpOJdiVw9viTXQ.png\" alt=\"\" class=\"wp-image-4800\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_X8xVGgaJcpOJdiVw9viTXQ.png 1050w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_X8xVGgaJcpOJdiVw9viTXQ-300x187.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_X8xVGgaJcpOJdiVw9viTXQ-1024x639.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_X8xVGgaJcpOJdiVw9viTXQ-768x479.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-gfycat wp-block-embed-gfycat\"><div style=\"position:relative; padding-bottom:calc(65.53% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/FilthyMistyChinesecrocodilelizard\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><\/figure>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\">Grab and move with input simulation \u2014 far interaction with hand ray \/ near interaction with articulated hand<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"d8c2\">How to resize an object?<\/h2>\n\n\n\n<p id=\"3383\"><strong>ObjectManipulator<\/strong>.cs supports two-handed scale\/rotation. This works with various input types such as HoloLens 2\u2019s articulated hand input, HoloLens 1\u2019s gaze + gesture input, and Windows Mixed Reality immersive headset\u2019s motion controller input.<\/p>\n\n\n\n<p id=\"3383\"><a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/mrtk-unity\/features\/ux-building-blocks\/object-manipulator?view=mrtkunity-2021-05\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>ObjectManipulator &#8211; Mixed Reality Toolkit<\/strong><\/a><\/p>\n\n\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1512\">How to move, rotate, and scale an object with precision?<\/h2>\n\n\n\n<p id=\"5a18\">Assign&nbsp;<strong>BoundsControl<\/strong>.cs to an object to use Bounding Box which is the interface for scaling and rotating an object. By default, it shows HoloLens 1 style blue handles and wires. To use HoloLens 2 style proximity-based animated handles, you need to assign prefabs and materials. Please refer to Bounds Control documentation and the&nbsp;<strong>BoundingControlExamples<\/strong>.unity scene for the configuration details.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/mrtk-unity\/features\/ux-building-blocks\/bounds-control?view=mrtkunity-2021-05\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>BoundsControl &#8211; Mixed Reality Toolkit<\/strong><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1050\" height=\"655\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_34LHrwtQRcQebo-uhlcc_A.png\" alt=\"\" class=\"wp-image-4791\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_34LHrwtQRcQebo-uhlcc_A.png 1050w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_34LHrwtQRcQebo-uhlcc_A-300x187.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_34LHrwtQRcQebo-uhlcc_A-1024x639.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_34LHrwtQRcQebo-uhlcc_A-768x479.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><\/figure>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/poordistantaustralianshelduck\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/poordistantaustralianshelduck\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Default Bounding Box and HoloLens 2 style in the BoundingBoxExamples.unity scene\n<\/figcaption>\n<\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"40d7\">How to make an object respond to input events?<\/h2>\n\n\n\n<p id=\"7b0c\">Assign&nbsp;<strong>PointerHandler<\/strong>.cs to an object. In the inspector, you will be able to use events&nbsp;<strong>OnPointerDown<\/strong>(),&nbsp;<strong>OnPointerUp<\/strong>(),&nbsp;<strong>OnPointerClicked<\/strong>(),&nbsp;<strong>OnPointerDragged<\/strong>()<\/p>\n\n\n\n<p id=\"3e20\">To use these events in a script, implement&nbsp;<mark><strong>IMixedRealityPointerHandler<\/strong><\/mark>.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/mrtk-unity\/architecture\/terminology?view=mrtkunity-2021-05\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Input System Terminology &#8211; Mixed Reality Toolkit<\/strong><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1050\" height=\"655\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_SC36kwh3SW95BA2sgIqNOw.png\" alt=\"\" class=\"wp-image-4797\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_SC36kwh3SW95BA2sgIqNOw.png 1050w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_SC36kwh3SW95BA2sgIqNOw-300x187.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_SC36kwh3SW95BA2sgIqNOw-1024x639.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_SC36kwh3SW95BA2sgIqNOw-768x479.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"46c5\">How to add visual feedback?<\/h2>\n\n\n\n<p id=\"ecd0\">Assign&nbsp;<strong>Interactable<\/strong>.cs to an object. In the inspector, create a new theme. Using Interactable\u2019s theme profiles, you can easily add visual feedback to all available input interaction states.<\/p>\n\n\n\n<p id=\"71a6\"><a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/mrtk-unity\/features\/ux-building-blocks\/interactable?view=mrtkunity-2021-05\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Interactable &#8211; Mixed Reality Toolkit<\/strong><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1050\" height=\"655\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_xGOobIM9Q0-_d_tQj4gyMw.png\" alt=\"\" class=\"wp-image-4801\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_xGOobIM9Q0-_d_tQj4gyMw.png 1050w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_xGOobIM9Q0-_d_tQj4gyMw-300x187.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_xGOobIM9Q0-_d_tQj4gyMw-1024x639.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_xGOobIM9Q0-_d_tQj4gyMw-768x479.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><\/figure>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/practicalgratefulafricanporcupine\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/practicalgratefulafricanporcupine\"><\/a><\/p>\n<\/figure>\n\n\n\n<p id=\"71a6\">Interactable provides various types of themes including the shader theme which allows you to control properties of the shader per interaction state.<\/p>\n\n\n\n<p id=\"ecc7\">Another important building block for visual feedback is the&nbsp;<strong>MRTK Standard Shader<\/strong>. With MRTK Standard Shader, you can easily add visual feedback effects such as hover light and proximity light. Since MRTK Standard shader performs significantly less computation than the Unity Standard shader, you can create a performant experience.<\/p>\n\n\n\n<p id=\"8f1b\">Create a new material and select the Shader&nbsp;<strong>\u2018Mixed Reality Toolkit &gt; Standard\u2019<\/strong>. Or you can pick one of the existing materials that use MRTK Standard Shader such as&nbsp;<strong>MRTK_Standard_Cyan<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"597\" height=\"634\" src=\"http:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_zjbBxXalFsw0d8ICL_ZTVQ.png\" alt=\"\" class=\"wp-image-4788\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_zjbBxXalFsw0d8ICL_ZTVQ.png 597w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_zjbBxXalFsw0d8ICL_ZTVQ-282x300.png 282w\" sizes=\"auto, (max-width: 597px) 100vw, 597px\" \/><\/figure>\n\n\n\n<p id=\"382f\">Assign the material into Mesh Renderer\u2019s materials property.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1050\" height=\"655\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_2vqLbB6EVQ-_QZcrUiqItA.png\" alt=\"\" class=\"wp-image-4790\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_2vqLbB6EVQ-_QZcrUiqItA.png 1050w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_2vqLbB6EVQ-_QZcrUiqItA-300x187.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_2vqLbB6EVQ-_QZcrUiqItA-1024x639.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_2vqLbB6EVQ-_QZcrUiqItA-768x479.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1050\" height=\"789\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_cV79CL4sBLVXK-Kz0Sk3eQ.png\" alt=\"\" class=\"wp-image-4792\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_cV79CL4sBLVXK-Kz0Sk3eQ.png 1050w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_cV79CL4sBLVXK-Kz0Sk3eQ-300x225.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_cV79CL4sBLVXK-Kz0Sk3eQ-1024x769.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_cV79CL4sBLVXK-Kz0Sk3eQ-768x577.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/mrtk-unity\/features\/rendering\/mrtk-standard-shader?view=mrtkunity-2021-05\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>MRTK Standard Shader &#8211; Mixed Reality Toolkit<\/strong><\/a><\/p>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/brilliantliquidblackbear\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/brilliantliquidblackbear\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Assigned material with MRTK Standard Shader\u2019s proximity light and border light options\n<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3f16\">How to add audio feedback?<\/h2>\n\n\n\n<p id=\"cf63\">Add&nbsp;<strong>AudioSource<\/strong>&nbsp;to an object. Then, in the scripts that expose input events(e.g. Interactable.cs or PointerHandler.cs), assign the object to the event and select&nbsp;<strong>AudioSource.PlayOneShot().&nbsp;<\/strong>You can use your audio clips or choose one from MRTK\u2019s audio assets.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1050\" height=\"647\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_GCMAzi-sAJfO06QdP2367A.png\" alt=\"\" class=\"wp-image-4794\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_GCMAzi-sAJfO06QdP2367A.png 1050w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_GCMAzi-sAJfO06QdP2367A-300x185.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_GCMAzi-sAJfO06QdP2367A-1024x631.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_GCMAzi-sAJfO06QdP2367A-768x473.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cbdd\">How to use HoloLens 2 style button prefabs?<\/h2>\n\n\n\n<p id=\"7481\">MRTK provides various types of HoloLens 2\u2019s shell(OS) style buttons. It provides sophisticated visual feedbacks such as proximity light, compressing box, and a ripple effect on the button surface to improve usability with hand-tracking input.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/mrtk-unity\/features\/ux-building-blocks\/button?view=mrtkunity-2021-05\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Buttons &#8211; Mixed Reality Toolkit<\/strong><\/a><\/p>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/handsomenervousfairyfly\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/handsomenervousfairyfly\"><\/a><\/p>\n\n<\/figure>\n\n\n\n<p id=\"eb2f\"><strong>PressableButtonExample<\/strong>.unity example scene shows various types of HoloLens 2 style button prefabs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1050\" height=\"687\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_u8bfFgx_vjhgEAX35BecUw.png\" alt=\"\" class=\"wp-image-4798\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_u8bfFgx_vjhgEAX35BecUw.png 1050w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_u8bfFgx_vjhgEAX35BecUw-300x196.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_u8bfFgx_vjhgEAX35BecUw-1024x670.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_u8bfFgx_vjhgEAX35BecUw-768x502.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><figcaption class=\"wp-element-caption\">PressableButtonExamples scene<\/figcaption><\/figure>\n\n\n\n<p id=\"f95d\">Simply drag and drop one of the HoloLens 2 style pressable button prefab into your scene. The prefab uses&nbsp;<strong>Interactable<\/strong>.cs which is introduced above. You can use exposed events such as&nbsp;<strong>OnClick()<\/strong>&nbsp;in the&nbsp;<strong>Interactable<\/strong>&nbsp;to trigger actions. Use&nbsp;<strong>OnClick()<\/strong>&nbsp;event to handle both near(direct) and far(indirect) interactions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1050\" height=\"647\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_xrCRCI8luQgBuKgXoqjgQQ.png\" alt=\"\" class=\"wp-image-4802\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_xrCRCI8luQgBuKgXoqjgQQ.png 1050w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_xrCRCI8luQgBuKgXoqjgQQ-300x185.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_xrCRCI8luQgBuKgXoqjgQQ-1024x631.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_xrCRCI8luQgBuKgXoqjgQQ-768x473.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5cb6\">How to make an object follow you?<\/h2>\n\n\n\n<p id=\"4805\">Assign&nbsp;<strong>RadialView<\/strong>.cs or&nbsp;<strong>Follow<\/strong>.cs script to an object. It is part of the Solver script series that allows you to achieve various types of object positioning in 3D space.&nbsp;<strong>SolverHandler<\/strong>.cs will be automatically added.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/mrtk-unity\/features\/ux-building-blocks\/solvers\/solver?view=mrtkunity-2021-05\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Solver &#8211; Mixed Reality Toolkit<\/strong><\/a><\/p>\n\n\n\n<p id=\"7a8f\">Below is an example of&nbsp;<strong>Radial View&nbsp;<\/strong>configuration to achieve \u2018lazy follow\u2019 tag-along behavior just like the Start menu in the HoloLens shell. You can specify the minimum\/maximum distance and minimum\/maximum view degrees. The example below shows positioning the object between 0.4m and 0.8m range within 15\u00b0. Adjust&nbsp;<strong>Lerp Time<\/strong>&nbsp;values to make the positional update faster or slower.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1050\" height=\"647\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_zmG4nnmgpUR7nwpfKukVGw.png\" alt=\"\" class=\"wp-image-4789\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_zmG4nnmgpUR7nwpfKukVGw.png 1050w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_zmG4nnmgpUR7nwpfKukVGw-300x185.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_zmG4nnmgpUR7nwpfKukVGw-1024x631.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_zmG4nnmgpUR7nwpfKukVGw-768x473.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><\/figure>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/linedgratefularcticfox\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/linedgratefularcticfox\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Example of using Radial View Solver on the Toggle Features Panel in the HandInteractionExamples scene\n<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"c166\">How to make an object face you?<\/h2>\n\n\n\n<p id=\"d642\">Assign&nbsp;<strong>Billboard<\/strong>.cs script to an object. It will always face you, regardless of your position. You can specify the pivot axis option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1050\" height=\"647\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_WC_5nBh2PkmHOZ3ic3lKnQ.png\" alt=\"\" class=\"wp-image-4799\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_WC_5nBh2PkmHOZ3ic3lKnQ.png 1050w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_WC_5nBh2PkmHOZ3ic3lKnQ-300x185.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_WC_5nBh2PkmHOZ3ic3lKnQ-1024x631.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/1_WC_5nBh2PkmHOZ3ic3lKnQ-768x473.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" \/><\/figure>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/excellentglaringliger\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/excellentglaringliger\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">The left object always faces the camera with Billboard script, with Y-axis pivot option\n<\/figcaption>\n<\/figure>\n\n\n\n<p> <\/p>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/elatedglaringaustraliankelpie\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/elatedglaringaustraliankelpie\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Example of using Billboard script in the Tooltip prefab to make the labels always face the camera\n\n<\/figcaption>\n<\/figure>\n\n\n\n<p><a href=\"https:\/\/www.linkedin.com\/in\/cre8ivepark\/\"><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Learn how to use MRTK to achieve some of the most widely used common interaction [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4657,"comment_status":"closed","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[31],"tags":[],"class_list":["post-4424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2021\/11\/MRTK03004_Moment3.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/4424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/comments?post=4424"}],"version-history":[{"count":9,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/4424\/revisions"}],"predecessor-version":[{"id":5147,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/4424\/revisions\/5147"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/media\/4657"}],"wp:attachment":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/media?parent=4424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/categories?post=4424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/tags?post=4424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}