Как переключаться с мыши на взгляд или взгляд на курсор мыши при переходе соответственно в режим VR или вне его?

Что я буду иметь?

Я легко переключаю события мыши с курсора мыши, когда не в режиме VR, на курсоры взгляда в режиме VR. См. Также псевдокод ниже:

Example 1
scene.addEventListener('enter-vr', function() {
    // use gaze cursors to toggle mouse events
});

scene.addEventListener('exit-vr', function() {
    // use mouse cursor to toggle mouse events
});

Почему?

Благодаря исследованиям, которые я видел, люди, впервые использующие виртуальную реальность, предпочитают курсоры мыши. При входе в режим VR этот курсор недоступен, и, согласно дальнейшим исследованиям, лучшим вариантом является курсор. С контроллерами от HTC, Oculus, GearVR и Daydream пользователи не умеют ими пользоваться.

Вывод:

  • Внутри режима VR: курсоры взгляда - лучший вариант.
  • Вне режима VR: курсоры мыши - лучший вариант.

Что я сделал

Исследовательская работа

Я нашел в документации по смене камеры:

Смена активной камеры

Когда активное свойство переключается, компонент уведомляет систему камеры об изменении текущей камеры, используемой средством визуализации:

var secondCameraEl = document.querySelector('#second-camera');
secondCameraEl.setAttribute('camera', 'active', true);

Мой код

Вот мой код, который я сделал

Example 2

var scene = document.getElementById('scene');

scene.addEventListener('enter-vr', function() {
  var secondCameraEl = document.querySelector('#vr-camera');
  secondCameraEl.setAttribute('camera', 'active', true);
});

scene.addEventListener('exit-vr', function() {
  var fistCameraEl = document.querySelector('#pc-camera');
  fistCameraEl.setAttribute('camera', 'active', true);
});

var box = document.getElementById('box');

box.addEventListener('click', function() {
  alert('click');
});
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<a-scene id="scene">
  <a-box id="box" class="clickable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>

  <a-entity id="camera">
    <a-camera id="vr-camera">
      <a-entity position="0 0 -1" geometry="primitive: ring; radiusOuter: 0.07;radiusInner: 0.05;" material="color: red; shader: flat" cursor="maxDistance: 1; fuse: true" raycaster="objects: .clickable">
        <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
        <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
      </a-entity>
    </a-camera>

    <a-camera id="pc-camera" active="true"></a-camera>
  </a-entity>
</a-scene>

Щелкните картонный значок, чтобы войти в VR, или Escape, чтобы выйти из VR.

Проблемы и рабочие вещи

Итак, вы можете видеть, что в моем коде есть несколько ошибок:

  1. Первая активная камера - #vr-camera. Это должно быть #pc-camera
  2. Когда вы выходите из VR, #pc-camera не запускает события мыши от указателя мыши.
  3. Курсор #vr-camera остается видимым при выходе из режима VR.
  4. См. Пункт 7.

Это работает:

  1. Измените камеру обратно на #pc-camera при выходе из VR.
  2. Курсор взгляда #vr-camera.

Вопрос

Можно ли переключать курсоры (взгляд мыши) в зависимости от того, находитесь вы в режиме VR или нет?

Обновлять

Возьмите ответ @Piotr, используя только одну камеру, и измените свойство fuse на true при входе в VR и измените на false при выходе из VR. Из его anwser я сделал код ниже.

Example 3

var scene = document.getElementById('scene');
var camera = document.querySelector('#camera')[0];

scene.addEventListener('enter-vr', function() {
  camera.setAttribute('cursor', 'maxDistance: 1; fuse: true');
});

scene.addEventListener('exit-vr', function() {
  camera.setAttribute('cursor', 'maxDistance: 1; fuse: false');
});

var box = document.getElementById('box');

box.addEventListener('click', function() {
  alert('click');
});
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<a-scene id="scene">
  <a-box id="box" class="clickable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>

  <a-camera id="camera">
    <a-entity position="0 0 -1" geometry="primitive: ring; radiusOuter: 0.07;radiusInner: 0.05;" material="color: red; shader: flat" cursor="maxDistance: 1; fuse: false" raycaster="objects: .clickable">
      <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
      <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
    </a-entity>
  </a-camera>

</a-scene>

Ошибка здесь:

  1. Когда курсор стоит на желтом цилиндре, событие щелчка синего куба не срабатывает. Вы должны установить курсор на синий куб, чтобы вызвать событие щелчка (также происходит во втором примере).
  2. Продолжая с 7, когда вы заменяете курсор и помещаете его обратно, событие щелчка запускается напрямую.
  3. В режиме VR нет fuseTimeout, по умолчанию он должен быть 1500 миллисекунд.

camera raycasting aframe cursors
person H. Pauwelyn    schedule 10.06.2017    source источник
comment
('Camera') [0] работает? Я использовал .children [0]. Кстати, чтобы использовать события щелчка, не помещая курсор на куб, импортируйте компонент курсора мыши, не нужно его изобретать :) github.com/mayognaise/aframe-mouse-cursor-component   -  person Piotr Adam Milewski    schedule 10.06.2017

Ответы (2)


arrow_upward
1
arrow_downward

Я бы сделал одну камеру с компонентом, который будет прослушивать событие enterVR в сцене

  • Когда enterVR создайте курсор в камере (или установите fuse на true или scale на
    1 1 1).
  • Когда exitVR удалите курсор (или установите fuse на false или scale на 0 0 0).

Компонент mouse-cursor не нужно удалять, так как он не имеет значения в режиме VR.

Для щелчков мышью используйте это: https://github.com/mayognaise/aframe-mouse-cursor-component

person Piotr Adam Milewski    schedule 10.06.2017
comment
Ты прав, сделал это по памяти, но все же думаю, это должно быть Ваше решение :) - person Piotr Adam Milewski; 10.06.2017
comment
ваше решение примерно верное. Отключить режим VR. Единственная проблема в том, что вы снова вне VR. Когда вы смотрите на желтый цилиндр, а затем щелкаете по кадру, это не сработает. Я обновляю свой вопрос, чтобы дать больше информации. - person H. Pauwelyn; 10.06.2017

arrow_upward
1
arrow_downward

Чтобы завершить ответ @Piotr: вот окончательный код, который я сделал:

require('aframe-mouse-cursor-component');

var scene = document.getElementById('scene');

scene.addEventListener('enter-vr', function() {
  document.getElementsByTagName('a-camera')[0].setAttribute('cursor', 'maxDistance: 1; fuse: true; fuseduration: 1500');
  document.getElementById('cursor').setAttribute('scale', '1 1 1');
});

scene.addEventListener('exit-vr', function() {
  document.getElementsByTagName('a-camera')[0].setAttribute('cursor', 'maxDistance: 1; fuse: false');
  document.getElementById('cursor').setAttribute('scale', '0 0 0');
});

var box = document.getElementById('box');

box.addEventListener('click', function() {
  alert('click');
});
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<a-scene id="scene">
  <a-box id="box" class="clickable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>

  <a-entity id="camera">
    <a-camera id="vr-camera" mouse-cursor>
      <a-entity id="cursor" position="0 0 -3" scale="0 0 0" geometry="primitive: ring; radiusOuter: 0.07;radiusInner: 0.05;" material="color: white; shader: flat" cursor="maxDistance: 30; fuse: false" raycaster="objects: .clickable">
        <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
        <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
      </a-entity>
    </a-camera>
  </a-entity>

</a-scene>

Примечание. Этот код не будет работать на 100% из-за отсутствия пакета npm. Не забудьте установить его с помощью
npm install --save-dev aframe-mouse-cursor-component

person H. Pauwelyn    schedule 10.06.2017