Skip to content

Control Entities

Max Cobb edited this page Sep 6, 2022 · 10 revisions

The idea for these entities is to offer more ways to add controls to the 3d scene, and away from the screen space we're used to for 2D apps. These may become more necessary in the future with any alternative hardware (🤓), but for now can still let users interact with the AR scene without breaking the immersion.

All of these entities have natural touch controls which are (almost) automatically enabled when adding to your scene. To enable them you just need to call RealityUI.enableGestures(.all, on: arView). You can replace .all with .longTouch, .tap, or [.longTouch, .tap] as you see fit, to minimise the gesture recognisers on your ARView.

RUISwitch

Add a 3D toggle to your RealityKit app, to easily toggle something on or off in your scene.

See RUISwitch documentation here.

To customise RUISwitch, check out SwitchComponent.

RUISwitch toggle example

Examples

let newSwitch = RUISwitch()
let newSwitch = RUISwitch(
  RUI: RUIComponent(respondsToLighting: true),
  changedCallback: { mySwitch in
    differentEntity.model?.materials = [
      SimpleMaterial(
        color: mySwitch.isOn ? .green : .red,
        isMetallic: false
      )
    ]
  }
)

RUIStepper

RUIStepper is used to increment or decrement a value.

See RUIStepper documentation here.

To customise RUIStepper, check out StepperComponent.

RUIStepper example

Example

let stepper = RUIStepper(upTrigger: { _ in
  print("positive tapped")
}, downTrigger: { _ in
  print("negative tapped")
})

RUISlider

An interactive track to represent an interpolated value.

See RUISlider documentation here.

To customise RUISlider, check out SliderComponent.

RUISlider with light responsiveness

Examples

let newSlider = RUISlider()
let newSlider = RUISlider(
  slider: SliderComponent(startingValue: 0.9, isContinuous: true)
) { (slider, _) in
  differentEntity.scale.x = slider.value + 0.1
}

RUIButton

RUIButton is used to initiate a specified action. The action here will only trigger if the gesture begins on a button, and also ends on the same button. This is similar to the touchUpInside UIControl Event.

See RUIButton documentation here.

To customise RUIButton, check out ButtonComponent.

RUIButton example

Example

let button = RUIButton(updateCallback: { myButton in
  myButton.buttonColor = .systemGreen
})

By default all RealityUI Entities are quite large. This is used to standardize the sizes so that you always know what to expect. For example, all UI thumbs are spheres with a diameter of 1 meter, which is 1 unit in RealityKit, ± any padding adjustments. All RealityUI Entities face [0, 0, -1] by default. To have them point at the user camera, or .zero, you can use the .look(at:,from:,relativeTo:) method like so: .look(at: .zero, from: [0, 0, 1]). Or if you want it to turn around straight away if you've positioned it at [0, 0, -1], set the orientation to simd_quatf(angle: .pi, axis: [0, 1, 0]). Using the .look() method works here by setting the at: value to the direction the button should be used from.

Clone this wiki locally