无法在React JS中输入Unity WebGL背景div [英] Unable to type in input with Unity WebGL background div in React JS
问题描述
import从'react'反应;
从'react-dom'导入ReactDOM;
从'react-unity-webgl'导入{Unity};
var timerCount = 0;
导出默认类App扩展React.Component {
构造函数（道具）{
super（道具）;
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}}> ;
< />
< / div>
< div style = {{position：'absolute'， width：'100％'，height：'100％'，zIndex：1}}>
< / div>
< / div>
）
} else {
return（
< div>
< div>
< input style = {{marginLeft：60，marginTop：100，width：600，height：80， zIndex：1}} type =textname =titleid =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）;
$ / code $ / pre
我在ReactJS中为Input Box做了一个div运作良好。但是在为Unity WebGL背景输入另一个div之后，键盘事件不起作用。 Unity集成有什么问题？
以下是控制台日志：
[ HMR]等待来自WDS的更新信号...
bundle.js：5945 [HMR]等待来自WDS的更新信号...
UnityLoader.js：4如果您配置了您可以缩短启动时间您的Web服务器使用gzip压缩来托管.unityweb文件。
bundle.js：9304 [WDS]启用热模块替换。
blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2初始化引擎版本：2017.2.0f3（46dda1414e51）
UnityLoader.js： 1创建WebGL 2.0上下文。
blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2渲染器：WebKit WebGL
blob：localhost：8000 / e1696fb5-90a3- 4d98-b184-aebb735ab198：2供应商：WebKit
blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2版本：OpenGL ES 3.0（WebGL 2.0 （OpenGL ES 3.0 Chromium））
blob：localhost：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_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_
团块lost_context
blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2 OPENGL LOG：创建OpenGL ES 3.0图形设备;上下文级别;上下文句柄1
blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2 UnloadTime：46.055000 ms
2blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2警告：2次FS.syncfs同时在飞行中操作，可能只是做了额外的工作
解决方案我找到了解决这个问题的解决方案。
以下是Unity的代码。
#if！UNITY_EDITOR&& UNITY_WEBGL
WebGLInput.captureAllKeyboardInput = false;
#endif
所以我在MonoBehaviour中添加了这段代码。
然后，它运作良好。
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
解决方案 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.
这篇关于无法在React JS中输入Unity WebGL背景div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
