Как обнаружить входы Gear VR в сцене React VR?

Я пытаюсь создать веб-приложение с помощью React VR и запустить его с помощью Samsung Gear VR.

Я не мог видеть белую точку по умолчанию (указатель VR) в режиме VR в своей сцене. Следовательно, такие методы, как «onInput» и «onClick», не работают. Те же методы прекрасно работают, если я просматриваю ту же сцену вне режима VR — даже с помощью браузера, предусмотренного в Gear VR.

Я что-то упускаю? Как получить доступ к этим методам в режиме VR в Gear VR?

Пример кода, который отлично работает в обычном веб-браузере (в том числе в Gear 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>

react-360 gear-vr
person Debojyoti Ghosh    schedule 30.05.2017    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Вам нужно добавить рейкастер:

Для этого вам необходимо сделать следующее:

В своем проекте перейдите к <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};

Вот и все. Теперь у вас должна быть белая точка в середине поля зрения.

person Hristo Georgiev    schedule 06.07.2017
comment
Спасибо за Ваш ответ. Кажется, это отлично работает в Chrome Canary. Эффекты наведения теперь работают. :) Мне еще предстоит попробовать это с GearVR. Мне также нужно проверить, работают ли операции щелчка. Как только я это сделаю, я обновлю здесь и отмечу ваш ответ как принятый. Спасибо еще раз. - person Debojyoti Ghosh; 11.07.2017
comment
@gdebojyoti, это самый простой рейкастер (курсор), поскольку он основан на взгляде, поэтому он без проблем будет работать с GearVR. Однако он не будет работать с контроллером. . Если вы хотите использовать мышь или контроллер в качестве передатчика лучей, вам нужно использовать собственный передатчик лучей. В настоящее время я работаю над универсальным рейкастером, который работает на всех устройствах и во всех браузерах с поддержкой WebVR. Я сообщу вам, когда буду готов поделиться им. - person Hristo Georgiev; 11.07.2017