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

时间：2017-06-10 10:40:42

标签： camera aframe raycasting cursors

我将拥有什么？

我不会在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 的

     

当活动属性被切换时，组件将通知相机系统更改渲染器使用的当前相机：

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

我的代码

这是我的代码

Example 2

＆＃13;
＆＃13; 
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');
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

点击纸板图标进入VR，按 Escape 退出VR。

问题和工作

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

  1. 活跃的第一个相机是#vr-camera。这必须是#pc-camera
  2. 当您退出VR时，#pc-camera不会从鼠标指针触发鼠标事件。
  3. 在VR模式之外，#vr-camera的光标保持可见。
  4. 见第7点。

    5. 这是有效的：

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

      问题

      如果您处于VR模式，是否可以切换游标（注视↔鼠标）？

      更新

      仅使用一台摄像机拍摄@Piotr，并在输入VR时将属性fuse更改为true，并在退出VR时更改为false。从他的回复中，我已经在下面制作了代码。

      Example 3

      ＆＃13;
      ＆＃13; 
      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');
});
      ＆＃13; 
      <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>
      ＆＃13;
      ＆＃13;
      ＆＃13;

      错误在这里：

      1. 当光标站在黄色cilinder上时，蓝色立方体的点击事件不会触发。您必须将光标设置为蓝色立方体以触发单击事件（也由第二个示例发生）。
      2. 继续7，当您更换光标并将其放回时，将直接触发click事件。
      3. 在VR模式下，默认情况下没有fuseTimeout，它必须是1500毫秒。

2 个答案:

答案 0 :(得分：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

答案 1 :(得分：1)

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

进行安装
相关问题
最新问题