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 集成有什么问题?
下面是控制台日志:
[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
最佳答案
我找到了这个问题的解决方案。
我从此链接找到了解决方案。 https://docs.unity3d.com/ScriptReference/WebGLInput-captureAllKeyboardInput.html
因此,我在 Unity 项目中添加了一些代码,并重新构建了 Unity 项目。
这是Unity的代码。
#if !UNITY_EDITOR && UNITY_WEBGL
WebGLInput.captureAllKeyboardInput = false;
#endif
所以我在 MonoBehaviour 中添加了这段代码。
然后,效果很好。
关于javascript - 无法在React JS中使用Unity WebGL背景div输入输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46841672/