유니티 - 리액트에서 Unity 오브젝트 컨트롤하기 (Communication from React to Unity)

Unity 전체 링크

리액트 전체 링크

 

참고 

- 유니티 WebGL + React 라우터 적용하기

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

- https://react-unity-webgl.dev/docs/api/send-message

 

유니티 WebGL을 React에서 빌드하였다면, 이제 리액트에서 유니티의 오브젝트를 움직여보자.

 

먼저 큐브에 있는 스크립트는 아래와 같이 수정한다.

천천히 회전하고 있는 큐브를 리액트에서 멈추거나 다시 움직이게 할 예정이다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Test : MonoBehaviour
{
    bool rotating = true;
    float rotateSpeed = 30.0f;
    Vector3 offset, rotation;

    public void changeRotate()
    {
        rotating = rotating ? false : true;
    }

    void Update()
    {
        if (rotating)
        {
            offset = Vector3.one;

            rotation.y = -(offset.x + offset.y) * Time.deltaTime * rotateSpeed;

            transform.Rotate(rotation);
        }
    }
}

changeRotate는 리액트에서 버튼을 이용해 호출하기 위한 함수다.

WebGL로 빌드한 후에 결과물을 리액트 build 폴더에 추가한다.

useUnityContext에서 sendMessage를 추가한다.
그리고 sendMessage(오브젝트, 메서드, 그 외 parameter ...)를 호출하면 리액트에서 유니티로 통신이 가능하다.
changeRotate의 경우는 인자를 받지 않으므로 아래와 같이 코드를 추가하였다. (참고 링크)

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

const Router2 = () => {
    const {
        unityProvider,
        sendMessage, // unity 함수를 호출하기 위한 sendMessage 추가
        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",
      });
    
      useEffect(() => {
        return () => {
          detachAndUnloadImmediate().catch((reason) => {
            console.log(reason);
          });
        };
      }, [detachAndUnloadImmediate]);

  return (
    <div>
      {/* 버튼 추가 */}
      <button onClick={() => sendMessage("Cube", "changeRotate")}>Rotate!!</button>
      <div>Router 2</div>
      <Unity unityProvider={unityProvider} style={{width:"50%"}}/>
    </div>
  );
};

export default Router2;

 

버튼을 누르면 오브젝트가 회전 상태가 변하는 것을 알 수 있다.

 

Unity Plus:

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

 

Unity Pro:

Unity Pro

 

Unity 프리미엄 학습:

Unity Learn