# Switch back and forth between xrController and FaceController

**URL:** https://forum.8thwall.com/t/switch-back-and-forth-between-xrcontroller-and-facecontroller/1649
**Category:** Technical Support
**Tags:** image-targets, threejs, face-effects
**Created:** [June 14, 2024, 6:27am UTC](https://forum.8thwall.com/t/switch-back-and-forth-between-xrcontroller-and-facecontroller/1649 "2024-06-14T06:27:17Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Stride9\_Development](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@Stride9\_Development](https://forum.8thwall.com/u/Stride9_Development)
#### Post date: [June 14, 2024, 6:27am UTC](https://forum.8thwall.com/t/switch-back-and-forth-between-xrcontroller-and-facecontroller/1649/1 "2024-06-14T06:27:17Z")

</div>

Is is possible to switch back and forth between xrController and FaceController using the same camera and threejs instances without XR8.stop() and XR8.run(), and instead use XR8.pause and XR8.resume? This is a threejs project.

The below call to swap() runs without errors and seems to switch out the controllers, though when switching back to XrController no image target recognition/tracking seems to be happening. The events `reality.imageloading` and `reality.imagescanning` are dispatched and I can see the image targets being loaded. Though no tracking…

```auto
const onxrloaded = () => {
  XR8.XrController.configure({disableWorldTracking: true})

  XR8.FaceController.configure({
    meshGeometry: [
      XR8.FaceController.MeshGeometry.FACE,
      XR8.FaceController.MeshGeometry.EYES,
      XR8.FaceController.MeshGeometry.MOUTH,
    ],
    coordinates: {mirroredDisplay: true},
    maxDetections: 3,
  })

  window.xrController = XR8.XrController.pipelineModule();
  window.faceController = XR8.FaceController.pipelineModule();

  XR8.addCameraPipelineModules([
    XR8.GlTextureRenderer.pipelineModule(),
    XR8.Threejs.pipelineModule(),
    window.xrController,
    window.LandingPage.pipelineModule(),
    XRExtras.FullWindowCanvas.pipelineModule(),
    XRExtras.Loading.pipelineModule(),
    XRExtras.RuntimeError.pipelineModule(),

    appModule(),
  ])

  document.body.insertAdjacentHTML('beforeend', camerafeedHtml)

  XR8.run({
    canvas: document.getElementById('camerafeed'),
    allowedDevices: XR8.XrConfig.device().ANY,
  })
}

const appModule = () =>
{
  let isFaceTrackingMode = false
  let imageTargets = []

  const imageTargetLoading = ({detail}) =>
  {
    imageTargets = []

    for (let i = 0; i < detail.imageTargets.length; i++) {
      imageTargets.push(detail.imageTargets[i].name);
    }
  }

  swap()
  {
      XR8.pause();

      isFaceTrackingMode = !isFaceTrackingMode;
      if (isFaceTrackingMode) {
        XR8.removeCameraPipelineModule(window.xrController.name);
        XR8.addCameraPipelineModule(window.faceController);
      } else {
        XR8.removeCameraPipelineModule(window.faceController.name);
        XR8.XrController.configure({disableWorldTracking: true, imageTargets: imageTargets})
        XR8.addCameraPipelineModule(window.xrController);
      }

      XR8.resume()
    }

  return {
    listeners: [
      { event: 'reality.imageloading', process: imageTargetLoading},
      { event: 'reality.imagescanning', process: imageTargetScanning},
      { event: 'reality.imagefound', process: showTarget},
      { event: 'reality.imageupdated', process: updateTarget},
      { event: 'reality.imagelost', process: hideTarget},
    ],
  }
}

```

---

<div class="post-metadata">

### Author: ![Stride9\_Development](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@Stride9\_Development](https://forum.8thwall.com/u/Stride9_Development)
#### Post date: [June 19, 2024, 12:50am UTC](https://forum.8thwall.com/t/switch-back-and-forth-between-xrcontroller-and-facecontroller/1649/2 "2024-06-19T00:50:41Z")

</div>

fwiw, replacing XR8.pause() and XR8.resume() with XR8.stop() and XR8.run() is not as seamless and causes a momentary wait, but it works. We still would love to know if there is way to make the transition as fast and seamless as possible, ideally without having to wait a few seconds for the swap to happen.

---

<div class="post-metadata">

### Author: ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)
#### Post date: [June 21, 2024, 10:33pm UTC](https://forum.8thwall.com/t/switch-back-and-forth-between-xrcontroller-and-facecontroller/1649/3 "2024-06-21T22:33:23Z")

</div>

To enhance its aesthetic appeal, consider adding CSS and a gradient fade.

Check out this example project using A-frame instead of three.js, which still serves as a valuable reference.

> **[Swap Camera: Face Effects \<-\> MRCS Hologram | 8th Wall Playground | 8th...](https://www.8thwall.com/playground/swap-camera-mrcs)**
>
> Swap between a face effect and world tracking MRCS Hologram!