Unable to type in input with Unity WebGL background div in React JS

问题

import React from 'react';
import ReactDOM from 'react-dom';
import {Unity} from 'react-unity-webgl';

var timerCount = 0;

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = { nPageNum: 0};
  }

  componentDidMount() {
    this.startTimer(this);
  }

  render() {
    if (timerCount > 5) {
        return(
          <div style={{ width: '100%', height: '100%' }}>
            <div  style={{ position: 'absolute', width: '100%', height: '100%', zIndex: 0 }}>
              <Unity src="Libs/object_unity/Build/WebGL.json" />
            </div>
            <div  style={{ position: 'absolute', width: '100%', height: '100%', zIndex: 1 }}>
              <input style={{ marginLeft:60, marginTop:100, width: 600, height: 80, zIndex: 1 }} type="text" name="title" id="title" />
            </div>
          </div>
        )
    } else {
        return(
          <div>
            <div>
              <input style={{ marginLeft:60, marginTop:100, width: 600, height: 80, zIndex: 1 }} type="text" name="title" id="title" />
            </div>
          </div>
        )
    }

  }
    tick () {
      timerCount = timerCount + 1;
      if (timerCount > 10) {
            this.stopTimer(this);
      }

      this.setState({ nPageNum: 1 });
  }
  startTimer () {
    clearInterval(this.timer);
    this.timer = setInterval(this.tick.bind(this), 20);
  }

  stopTimer () {
    clearInterval(this.timer);
  }
}

I made one div for Input Box in ReactJS and It was working well. But After input another div for Unity WebGL background, keyboard events not work. What's wrong with Unity integration?

Below is the console log:

[HMR] Waiting for update signal from WDS... bundle.js:5945 [HMR] Waiting for update signal from WDS... UnityLoader.js:4 You can reduce your startup time if you configure your web server to host .unityweb files using gzip compression. bundle.js:9304 [WDS] Hot Module Replacement enabled. blob:localhost:8000/e1696fb5-90a3-4d98-b184-aebb735ab198:2 Initialize engine version: 2017.2.0f3 (46dda1414e51)

UnityLoader.js:1 Creating WebGL 2.0 context. blob:localhost:8000/e1696fb5-90a3-4d98-b184-aebb735ab198:2 Renderer: WebKit WebGL

blob:localhost:8000/e1696fb5-90a3-4d98-b184-aebb735ab198:2 Vendor: WebKit

blob:localhost:8000/e1696fb5-90a3-4d98-b184-aebb735ab198:2 Version: OpenGL ES 3.0 (WebGL 2.0 (OpenGL ES 3.0 Chromium))

blob:localhost:8000/e1696fb5-90a3-4d98-b184-aebb735ab198:2 GLES: 3

blob:localhost:8000/e1696fb5-90a3-4d98-b184-aebb735ab198:2 EXT_color_buffer_float GL_EXT_color_buffer_float EXT_disjoint_timer_query_webgl2 GL_EXT_disjoint_timer_query_webgl2 EXT_texture_filter_anisotropic GL_EXT_texture_filter_anisotropic OES_texture_float_linear GL_OES_texture_float_linear WEBGL_compressed_texture_s3tc GL_WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb GL_WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info GL_WEBGL_debug_renderer_info WEBGL_debug_shaders GL_WEBGL_debug_shaders WEBGL_lose_context GL_WEBGL_lose_context

blob:localhost:8000/e1696fb5-90a3-4d98-b184-aebb735ab198:2 OPENGL LOG: Creating OpenGL ES 3.0 graphics device ; Context level ; Context handle 1

blob:localhost:8000/e1696fb5-90a3-4d98-b184-aebb735ab198:2 UnloadTime: 46.055000 ms

2blob:localhost:8000/e1696fb5-90a3-4d98-b184-aebb735ab198:2 warning: 2 FS.syncfs operations in flight at once, probably just doing extra work

回答1:

I found the solutions for this questions.

I found the solution from this link. https://docs.unity3d.com/ScriptReference/WebGLInput-captureAllKeyboardInput.html

So I added some code in the Unity project and I rebuilt the Unity project.

Here are the code of the Unity.

#if !UNITY_EDITOR && UNITY_WEBGL
WebGLInput.captureAllKeyboardInput = false;
#endif

So I added this code in the MonoBehaviour.

And then, it works well.

来源：https://stackoverflow.com/questions/46841672/unable-to-type-in-input-with-unity-webgl-background-div-in-react-js

标签

javascript

html

reactjs

unity-webgl