如何在React VR场景中检测Gear VR输入?

问题描述

我正在尝试使用React VR创建一个Web应用程序，并使用Samsung Gear VR运行它.

I am trying to create a web app using React VR and run it using Samsung Gear VR.

在场景中处于VR模式时，我看不到默认的白点(VR指针).因此，诸如"onInput"和"onClick"之类的方法不起作用.如果我在VR模式下查看相同的场景，即使使用Gear VR中提供的浏览器，相同的方法也可以很好地工作.

I could not see the default white dot (VR pointer) while in VR mode in my scene. Consequently methods such as "onInput" and "onClick" are not working. The same methods work quite fine if I view the same scene outside VR mode - even using the browser provided in Gear VR.

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

Am I missing something? How do I access those methods while in VR mode in Gear VR?

示例代码在普通的Web浏览器(包括Gear VR中的浏览器)中可以正常工作，但在我使用VR时却不能.

Example code that works fine in normal web browser (including the one in Gear VR), but not when I am in 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:

You need to add a raycaster:

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

To do so, you need to do the following:

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

In your project, go to <project root>/vr/client.js. Just before the init method, add a SimpleRaycaster constant.

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

function init(bundle, parent, options) {

//...

然后，在init方法中，设置cursorVisibility: visible并将光线投射器添加到raycasters的数组中:

Then, in the init method, set cursorVisibility: visible and add the raycaster to the array of 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};

就是这样.现在，您应该在视图中间出现一个白点.

That's it. Now you should have a white dot in the middle of your view.

这篇关于如何在React VR场景中检测Gear VR输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！