React VR

react vr消息传递

2017-06-30  本文已影响40人  liu_520

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

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啥的

    }

}

上一篇下一篇

猜你喜欢

热点阅读