react vr消息传递
qq群:481244084
有时间我们需要在react vr 和client之间进行通信,举个例子,鼠标点击了某个物体,需要改变相机的镜头,截止目前为止,react-vr的版本是1.2.0,相机的操作还都是在原生threejs里面进行的,也就是在react vr目录下面的client.js文件里面操作,而要实现这两个的通信,就需要用到事件来进行了。
下面直接上具体的操作:
一、首先在client.js里面注册监听事件:
也就是在VRInstance的实例里面的 return vr;之前添加如下代码:
vr.rootView.context.worker.addEventListener('message',onVRMessage);
也就是在根rootview的下下文对象中进行中,查看源码我们可以看到,react vr本身就是利用这个监听事件进行消息传递的,一边postMessage,另一边onmessage,
这个具体传递消息的工人就是Worker,这个worker有下面的几个方法:
onmessage
postMessage
terminate
addEventListener
而具体需要工人干哪些事,是在ReacNativeContext下文中进行的,不管是初始化、创建根view、销毁根view、更新每一帧、更新根view、react模块的回调都离不开这个工人来进行消息或者命令的传达,它就有点像老总的小蜜一样。
二、添加监听事件的具体实现
在client.js里面添加下面的代码,当然类型和类型里面的方法你自己根据自己的需求来定啦,我这儿是sceneChanged,表示场景切换了
监听事件的具体实现三、在index.vr.js里面传递消息给client
postMessage ( { type: "sceneChanged"} )
在你需要的地方调用这个方法就行了,在client里面就可以收到了,发送一堆json对象过去。
四、如何实现反向传递消息呢
4.1在client.js里面发送事件:
vr.rootView.context.worker.postMessage( {type:"newPosition",positionx:15});
4.2在index.vr.js里面进行接收
window.addEventListener ( 'message' , this. onWindowMessage);
具体的方法:
onWindowMessage = (e )=>{
if ( e.data.type == 'newPosition'){
//这里面接收到新的参数,跟新view啥的
}
}