1

我正在尝试在 A-Frame 控制环境照明的墙上做一个灯开关。

我在场景中放置了实际的灯光，以便命名它们，并使用 javascript 进行更改。

由于我无法让游戏控制器 gamepadbuttondown:0（或 5）注册为 onClick 事件，因此我向开关本身的 a-entity 添加了一个动画，并且我有一个事件侦听器准备触发并制作变化。

一切都可以在台式电脑上运行，使用实际的鼠标和编程的 onClick 事件，但是当在带有廉价 5 美元 Mocute 控制器的 VR 头戴式手机上尝试时，我被卡住了。

                <a-entity id="lightswitch" onclick="WorksFineOnPC();" >
                <a-box geometry="height:4.5; depth:4.5; width:.25" position="143 48 14" material="src:https://www.myWebsite/pic.jpg;">
                    <a-animation id="LightAnimation" attribute="rotation" to="0 360 0" dur="100" begin="gamepadbuttondown:0"></a-animation>
                </a-box>
            </a-entity>

将“gamepadbuttondown:0”替换为“click”在 PC 上运行良好，但 onClick 功能开始运行良好，并且仍然无法使用遥控器进行控制。

gamepadbuttondown:0 适用于声音，如下例所示：

<a-entity gamepad-controls
      sound="src: pew-pew.wav;
             on: gamepadbuttondown:7">

这个控制器和其他控制器工作得很好，所以错误出现在动画触发事件的某个地方。

我计划将动画缩短到 1 毫秒，而不是 100 毫秒。我只是将它作为启动事件的一种方式，因此我可以使用事件侦听器来查看何时发出“animationend”。并希望它对用户不可见。

我尝试使用空动画，但如果我没有输入类型和方向，则无法渲染该框。

如果可能的话，我想完全跳过动画，如果有人知道如何使用 button[x] 而不是使用实际鼠标从控制器触发 onclick 事件。也许有一个raycaster解决方案？直接访问引擎盖下的 Three.js？

4

2 回答 2

0

@Don McCurdy，好的，所以我打开了 Fusion-Cursor，并添加了一个 onClick 事件以使用 var 来“设置焦点主题”。

onclick="SetSubjectOfFocus('light switch');

然后我添加了 3 个不同的事件侦听器：moseup、touchend 和 button:0 所有 3 个事件都将启动“待办事项”功能。

然后，该函数将查看分配给焦点主题的 var，并使用 if-then 语句的清单触发所需的效果。

我正在使用“点击”，但融合导致我看到的所有内容都被自动选择。我可能会添加一个切换开关，默认情况下为没有游戏手柄的人保留它，但如果检测到游戏手柄，请将其关闭。（即不添加事件侦听器，或者添加一个。）

https://jsfiddle.net/RonK/vm81ddn7/8/

我需要在设置融合超时时返回 0，这样就没有延迟，如果你赶时间，它不会意外点击旧项目。

这可以在下一个版本中添加到 gamepad-controls.js 中。我建议在后端使用所有这些，除了：

<a-entity id="lightswitch" my-listener></a-entity>

和

<a-entity id="lightswitch" onClick="DoSomething();"></a-entity>

你可以添加：

<a-entity id="lightswitch" OnTriggerEvent="DoSomething();"></a-entity>
于 2017-06-19T07:55:58.777 回答
0

在 Web 浏览器中，onclick="foo()"语法意味着，当事件以 type 触发时click，执行函数。因为按钮按下不是点击，onclick所以在这里对您没有帮助。

相反，您可以为任何事件类型创建一个侦听器，如下所示：

var lightswitchEl = document.querySelector('#lightswitch');
lightswitchEl.addEventListener('gamepadbuttondown:7', function () {
  console.log('button pressed!');
});

如果您希望它在您的 HTML 中具有“声明性”，只需注册一个 A-Frame 组件来为您进行监听：

AFRAME.registerComponent('my-listener', {
  init: function () {
    this.el.addEventListener('gamepadbuttondown:7', function () {
      console.log('button pressed!');
    });
  }
});

接着：

<a-entity id="lightswitch" my-listener></a-entity>

注意：该gamepadbuttondown:7事件不是浏览器创建的正常事件。它是由gamepad-controls组件为方便而生成的。

于 2017-06-10T23:30:13.693 回答