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啥的
}
}
网友评论