preventing webgl pointer lock

[siosw]

Hi all!

First of all, thank you Jeffery for this project, works like a charm :)

I'm currently working with a setup where the unity scene is loading in the background (lower z index than the rest of the page) and is only moved to the foreground once it's loaded and a button is pressed.

Now I'm struggling with weird pointer capture behaviour while the unity scene is hidden. Is there any way to completely turn off pointer lock here?

I have tried dumb hacks like making the size of the canvas 0px while loading or setting pointerEvents: none. But I think what I actually need to do is control when canvas.requestPointerLock() is being called, I just don't know how.

Any help would be greatly appreciated!

[jeffreylanters]

Hi, sorry for my late answer. I've been really busy lately. I hope this answer will still help you and I will add support for locking the pointer in the near future. But for now, there is an easy solution as following:

import React, { useEffect } from "react";
import Unity, { UnityContext } from "react-unity-webgl";

const unityContext = new UnityContext({
  loaderUrl: "build/myunityapp.loader.js",
  dataUrl: "build/myunityapp.data",
  frameworkUrl: "build/myunityapp.framework.js",
  codeUrl: "build/myunityapp.wasm",
});

function App() {
  useEffect(function () {
    unityContext.on("canvas", function (canvas) {
      canvas.requestPointerLock();
    });
  }, []);

  return (
    <Unity unityContext={unityContext} />
  );
}

[jeffreylanters]

FYI the feature has been implemented natively in the upcoming release 8.6.0.