無法在React JS中輸入使用Unity WebGL背景div的輸入

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); 
    } 
}

我在ReactJS中爲輸入框製作了一個div，它運行良好。但是在爲Unity WebGL背景輸入另一個div之後，鍵盤事件不起作用。 Unity集成有什麼問題？無法在React JS中輸入使用Unity WebGL背景div的輸入

下面是控制檯日誌：

[HMR]等待從WDS更新信號... bundle.js：5945 [HMR]從WDS等待更新信號... UnityLoader.js ：4如果將Web服務器配置爲使用gzip壓縮託管.unityweb文件，則可以縮短啓動時間。 bundle.js：9304 [WDS]啓用熱模塊更換。斑點：本地主機：8000/e1696fb5-90a3-4d98-B184-aebb735ab198：2初始化引擎版本：2017.2.0f3（46dda1414e51）

UnityLoader.js：1個創建的WebGL 2.0上下文。斑點：本地主機：8000/e1696fb5-90a3-4d98-B184-aebb735ab198：2渲染：WebKit的WebGL的

斑點：本地主機：8000/e1696fb5-90a3-4d98-B184-aebb735ab198：2賣方：WebKit的

斑點：本地主機：8000/e1696fb5-90a3-4d98-B184-aebb735ab198：2版本：OpenGL ES的3.0（WebGL的2.0（OpenGL ES的3.0鉻））

斑點：本地主機：8000/e1696fb5-90a3-4d98-b184- aebb735ab198：2 GLES：3

斑點：本地主機：8000/e1696fb5-90a3-4d98-B184-aebb735ab198：2 EXT_color_buffer_float GL_EXT_color_buffer_float EXT_disjoint_timer_query_webg L2 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

斑點：本地主機：8000/e1696fb5-90a3-4d98-B184-aebb735ab198：2 OPENGL LOG：創建的OpenGL ES 3.0圖形裝置;上下文級別;上下文句柄1

斑點：本地主機：8000/e1696fb5-90a3-4d98-B184-aebb735ab198：2 UnloadTime：46.055000毫秒

2blob：本地主機：8000/e1696fb5-90a3-4d98-B184-aebb735ab198：2警告：2次FS.syncfs操作一次在飛行中，可能只是做額外的工作

來源

2017-10-20 Hans Chan

「Unity」組件的代碼是什麼？ – SherylHohman

這只是飛濺動畫。沒有任何功能。 –

好的。那我不知道。 – SherylHohman

我找到了這個問題的解決方案。

我從這個鏈接找到解決方案。 https://docs.unity3d.com/ScriptReference/WebGLInput-captureAllKeyboardInput.html

因此，我在Unity項目中添加了一些代碼，並重建了Unity項目。

以下是Unity的代碼。

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

所以我在MonoBehaviour中添加了這段代碼。

然後，它運作良好。

來源

2017-10-20 13:21:25

無法在React JS中輸入使用Unity WebGL背景div的輸入

回答

相關問題