react vr消息传递

react vr中文网：react vr中文网--www.vr-react.com

有时间我们需要在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啥的

    }

}