리액트 - WebGL로 빌드된 유니티 전체 화면으로 변경하기 (Entering Fullscreen Unity WebGL in React)

리액트 전체 링크

Unity 전체 링크

 

참고

- 리액트에서 Unity 오브젝트 컨트롤하기

- Unity에서 리액트로 이벤트 호출하기

 

Unity에서 리액트로 이벤트 호출하기에서 코드를 추가 전체 화면이 되도록 하는 코드를 추가하자.

 

useUnityContext에서 requestFullscreen을 추가한다.

  const {
    unityProvider,
    sendMessage, // unity 함수를 호출하기 위한 sendMessage 추가
    addEventListener, // unity -> react 통신
    removeEventListener, // unity -> react 통신
    requestFullscreen, // 전체 화면
    UNSAFE__detachAndUnloadImmediate: detachAndUnloadImmediate,
  } = useUnityContext({
    loaderUrl: "build/html-hosting.loader.js",
    dataUrl: "build/html-hosting.data",
    frameworkUrl: "build/html-hosting.framework.js",
    codeUrl: "build/html-hosting.wasm",
  });

 

이 메서드에 true를 넣어주면 된다.

  const clickForFullScreen = () => {
    requestFullscreen(true)
  }

 

위 함수를 호출하기 위해 버튼을 추가하자.

  <button onClick={clickForFullScreen}>
    전체 화면 on / off
  </button>

 

전체 코드는 다음과 같다.

import React, { useCallback, useEffect, useState } from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

const Router2 = () => {
  const [speed, setSpeed] = useState(30.0);
 
  const {
    unityProvider,
    sendMessage, // unity 함수를 호출하기 위한 sendMessage 추가
    addEventListener, // unity -> react 통신
    removeEventListener, // unity -> react 통신
    requestFullscreen, // 전체 화면
    UNSAFE__detachAndUnloadImmediate: detachAndUnloadImmediate,
  } = useUnityContext({
    loaderUrl: "build/html-hosting.loader.js",
    dataUrl: "build/html-hosting.data",
    frameworkUrl: "build/html-hosting.framework.js",
    codeUrl: "build/html-hosting.wasm",
  });

  const setSpeedUp = useCallback((curSpeed, value) => {
    setSpeed(curSpeed + value);
  }, []);

  const setSpeedDown = useCallback((curSpeed, value) => {
    setSpeed(curSpeed - value);
  }, []);

  useEffect(() => {
    addEventListener("reactSpeedUp", setSpeedUp);
    addEventListener("reactSpeedDown", setSpeedDown);

    return () => {
      detachAndUnloadImmediate().catch((reason) => {
        console.log(reason);
      });
      removeEventListener("reactSpeedUp", setSpeedUp);
      removeEventListener("reactSpeedDown", setSpeedDown);

    };
  }, [
    detachAndUnloadImmediate,
    addEventListener,
    removeEventListener,
    setSpeedUp,
    setSpeedDown,
  ]);

  const clickForFullScreen = () => {
    requestFullscreen(true)
  }

  return (
    <div>
      {/* 버튼 추가 */}
      <button onClick={() => sendMessage("Cube", "changeRotate")}>
        Rotate!!
      </button>
      <button onClick={clickForFullScreen}>
        전체 화면 on / off
      </button>
      <p>{`speed : ${speed}`}</p>
      <Unity unityProvider={unityProvider} style={{ width: "50%" }} />
    </div>
  );
};

export default Router2;