当前位置 : 主页 > 网页制作 > React >

gear-vr – 如何在React VR场景中检测Gear VR输入?

来源:互联网 收集:自由互联 发布时间:2021-06-15
我正在尝试使用React VR创建一个Web应用程序并使用Samsung Gear VR运行它. 在我的场景中处于VR模式时,我看不到默认的白点(VR指针).因此,诸如“onInput”和“onClick”之类的方法不起作用.如果我
我正在尝试使用React VR创建一个Web应用程序并使用Samsung Gear VR运行它.

在我的场景中处于VR模式时,我看不到默认的白点(VR指针).因此,诸如“onInput”和“onClick”之类的方法不起作用.如果我在VR模式之外查看相同的场景,即使使用Gear VR中提供的浏览器,相同的方法也能正常工作.

我错过了什么吗?如何在Gear VR中以VR模式访问这些方法?

在普通Web浏览器(包括Gear VR中的浏览器)中正​​常工作的示例代码,但不适用于我在VR中.

<Text
    style={{
        // backgroundColor: '#777879',
        fontSize: 0.2,
        transform: [{translate: [0, 0, -5]}],
        color: this.state.textColor
    }}
    onEnter={() => this.setState({textColor: 'gold'})}
    onExit={() => this.setState({textColor: 'white'})}>
    This text will turn gold when you look at it.
</Text>
你需要添加一个raycaster:

为此,您需要执行以下操作:

在您的项目中,转到< project root> /vr/client.js.
 在init方法之前,添加一个SimpleRaycaster常量.

const SimpleRaycaster = {
    getType: () => "simple",
    getRayOrigin: () => [0, 0, 0],
    getRayDirection: () => [0, 0, -1],
    drawsCursor: () => true
};

function init(bundle, parent, options) {

//...

然后,在init方法中,设置cursorVisibility:visible并将raycaster添加到raycasters数组:

function init(bundle, parent, options) {
  const vr = new VRInstance(bundle, 'Example', parent, {
      raycasters: [
          SimpleRaycaster // Add SimpleRaycaster to the options
      ],
      cursorVisibility: "visible", // Add cursorVisibility
      enableHotReload: true,
    ...options,
  });
  vr.render = function() {
    // Any custom behavior you want to perform on each frame goes here
  };
  // Begin the animation loop
  vr.start();
  return vr;
}

window.ReactVR = {init};

而已.现在你应该在视图中间有一个白点.

网友评论