当分别进入 VR 模式内部或外部时，如何从鼠标切换到凝视或凝视到鼠标光标？

Question

我会有什么？

当不在 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 的人更喜欢鼠标光标。进入 VR 模式，此光标不可用，通过进一步研究，凝视光标是最佳选择。使用 HTC 的控制器，Oculus、GearVR 和 Daydream 并不是用户不熟悉使用它的原因。

结论：

内部 VR 模式：注视光标是最佳选择。
外部 VR 模式：鼠标光标是最佳选择。

我做了什么

研究

我在文档中找到了更换相机的方法：

Changing the Active Camera

When the active property gets toggled, the component will notify the camera system to change the current camera used by the renderer:
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。}

问题和工作

所以你可以看到我的代码中有几个错误：

第一台处于活动状态的相机是 #vr-camera。这必须是 #pc-camera
当您退出 VR 时，#pc-camera 不会从鼠标指针触发鼠标事件。
离开 VR 模式时 #vr-camera 的光标保持可见。
参见第 7 点。

这是有效的：

退出 VR 时将相机更改回 #pc-camera。
#vr-camera 的注视光标。

问题

是否可以根据您是否处于 VR 模式切换光标 （凝视 ↔ 鼠标）？

更新

仅使用一台相机拍摄@Piotr 的答案，进入 VR 时将属性 fuse 更改为 true，退出 VR 时更改为 false。根据他的回答，我在下面编写了代码。

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>

错误在这里：

当光标停留在黄色圆柱上时，蓝色立方体的点击事件不会触发。您必须将光标设置为蓝色立方体才能触发点击事件（第二个示例也会发生）。
继续7，当你替换光标并将其放回原位时，直接触发点击事件。
在 VR 模式下没有 fuseTimeout 默认情况下它必须是 1500 毫秒。

Answer 1

我会制作一个带有组件的相机，该组件会监听 scene

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

Answer 2

完成@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}

安装它

当分别进入 VR 模式内部或外部时，如何从鼠标切换到凝视或凝视到鼠标光标？

How to switch from mouse to gaze or gaze to mouse cursor when going respectively inside or outside VR mode?

camera

cursors

raycasting

aframe

我会有什么？

为什么？

我做了什么

研究

我的代码

问题和工作

问题

更新