🕶️
NRSDK(Old)
New DocumentationSDK DownloadAPI Reference
v2.2.1
v2.2.1
  • NRSDK Fundamentals
    • NRSDK Overview
    • XREAL Devices
      • XREAL Glasses
      • Controller
      • Compatibility
    • Getting Started with NRSDK
    • Sample Code
    • Tutorials
    • Release Note
      • NRSDK 2.2.1
      • NRSDK 2.2.0
      • NRSDK 2.1.1
      • NRSDK 2.1.0
      • NRSDK 1.10.2
      • NRSDK 1.9.5
      • NRSDK 1.9.3
      • NRSDK 1.9.1
      • NRSDK 1.8.0
      • NRSDK 1.7.0
      • NRSDK 1.6.0
  • Development
    • Input and Camera
      • NRInput
      • Interact with Unity UI (Tutorial)
      • Customize Controller UI
      • NRCameraRig
    • Hand Tracking
    • Image Tracking
      • XREAL Markers
    • Plane Detection (Tutorial)
      • Overview
      • Import the package
      • Detect planes in the real world
      • Perform a hit test against detected planes
      • Add a car
      • Add gems
      • Wrap up
    • Depth Mesh
      • Meshing Manager Overview
      • Use Meshes in the Editor
      • Tutorial: Mesh Collision
    • Spatial Anchor
      • Mapping Example Scene
      • Tutorial: Halloween Treasure Hunt
        • Handle the Situation of Failed Anchor Saving
      • Tutorial: Sharing Anchors
        • Setting Up Photon
        • Cloud Storage: Firebase (optional)
        • Cloud Storage: Aliyun OSS (optional)
        • Implementing Cloud Save and Load
        • Sharing Anchors with Photon
    • Tools
      • Single Pass Stereo Rendering
      • First Person View
      • Emulator
      • XR Streaming
      • Dual Screen Display
    • Miscellaneous
      • Access RGB Camera
      • NRSDK Coordinate Systems
      • MRTK2 Integration
      • MRTK3 Integration
      • Notification popup
      • Reset Camera
      • Render Metrics
      • Render MonoMode(Obsolete)
  • API Reference
  • Frequently Asked Questions
  • Design Guide
    • Design Guide Overview
    • Displaying
    • Interacting
    • Controlling
    • Navigating
Powered by GitBook
On this page

Was this helpful?

  1. Development
  2. Input and Camera

Interact with Unity UI (Tutorial)

PreviousNRInputNextCustomize Controller UI

Was this helpful?

To help you get started with integrating control into your own app, we have prepared a sample case study.

By reading the tutorial you will be able to:

  1. Select a range of appropriate inputs to use with the controller.

  2. Write code in C# to receive user inputs such as the Home, Bumper, Trigger and Touchpad.

  3. Activate, rotate, and move a GameObject by using the input.

  4. Interact with physical objects and UGUI in the unity environment.

Objective:

  1. When pointing the controller at the cube, its color will change to green.

  2. The color of the cube will randomly change when you press the trigger button.

  3. The cube will rotate with the controller.

  4. Activate or deactivate the cube for rotation by pressing the UGUI button.

Steps:

  1. Drag NRCameraRig and the NRInput prefab to the scene hierarchy.

2. Create a cube. In the Inspector window, set its position to (0, 0.1, 3), and scale to (0.3, 0.3, 0.3).

3. Create a script named “CubeInteractiveTest.cs” as follows and add it to the cube.

public class CubeInteractiveTest : MonoBehaviour, IPointerClickHandler, IPointerEnterHandler, IPointerExitHandler
{
 private MeshRenderer m_MeshRender;

 void Awake () {
     m_MeshRender = transform.GetComponent<MeshRenderer>();
 }

 void Update()
 {
     //get controller rotation, and set the value to the cube transform
     transform.rotation = NRInput.GetRotation();
 }

 //when pointer click, set the cube color to random color
 public void OnPointerClick(PointerEventData eventData)
 {
     m_MeshRender.material.color = new Color(Random.Range(0f, 1f), Random.Range(0f, 1f), Random.Range(0f, 1f));
 }

 //when pointer hover, set the cube color to green
 public void OnPointerEnter(PointerEventData eventData)
 {
     m_MeshRender.material.color = Color.green;
 }

 //when pointer exit hover, set the cube color to white
 public void OnPointerExit(PointerEventData eventData)
 {
     m_MeshRender.material.color = Color.white;
 }
}

4. Add a DirectLight to brighten the cube.

5. Add a Canvas and delete the EventSystem.

6. Set the Canvas RenderMode to WorldSpace, and then set its position and scale to an appropriate value such as that listed below.

7. Remove the “Graphic Raycaster” component from it and add <u>Canvas Raycast Target</u>.

8. Add two buttons to the Canvas as its children. Name one button activeBtn and the other deactive. Remember to also change the button text.

9. Set the buttons to an appropriate position and add the SetActive function as their OnClick events.

10. Finally, compile the app. An interactive mixed reality app utilizing user input with a XREAL Light controller is complete.

image11
image17
image17
image18
image10