Disable Mobile Game Controls

[hmbrg]

When including a Spline scene with game controls, on mobile devices I get on-display game controls that don't seem to work correctly. There doesn't appear to be any props to disable them. How can I fix that?

[wholelott4]

I'm not sure if there is another way to do it, but you can do it like this.

import { useRef } from 'react';
import Spline from '@splinetool/react-spline';
import { Application } from '@splinetool/runtime';

export default function App() {
  const spline = useRef<any>();

  function onLoad(splineApp: Application) {
    if (splineApp) {
      spline.current = splineApp;
      const controls = splineApp.controls
      if(controls?.joysticks) {
        const joysticks = [...controls.joysticks]
        const correctJoystick = joysticks.filter(e => e !== undefined)
        correctJoystick[0][0].destroy()
      }
    }
  }

  return (
    <div>
      <Spline
        scene="https://prod.spline.design/Vco6aLQFoV7ZvEQL/scene.splinecode"
        onLoad={onLoad}
      />
    </div>
  );
}

the Spline scene will retrieve to you informations about the joysticks, and there is a function called "destroy", which you can use.

Note that I applied some validations to reach the joystick on this sample code, it might be different for you using your scene, so debug it.

[hmbrg]

Thanks for the response! I tried the code snippet, but unfortunately it only removes the left joystick. The button on the right is still there. I've also looked at the controls object and there doesn't seem to be any destroy function for that button.