Javascript A帧-如何强制最大/最小摄影机倾斜

我有六个平面设置为立方体，带有纹理以显示360度jpg集。我将飞机放置在1000米之外，并使其在2000米以上，因为照片在高度和宽度上有一点重叠

a摄像机位于该立方体内的原点，wasd控件设置为false，因此摄像机仅限于原地旋转。我在笔记本电脑上编码，用鼠标拖动来移动相机

我还有一个不可见的球体，放置在相机和平面之间，并为其添加了一个事件侦听器。这似乎比在六个平面中的每一个平面上放置事件侦听器更简单

我目前的问题是想强制执行最小和最大倾斜限制。以下是用于此目的的函数handleIt。允许的最小倾斜取决于视场的大小

 function handleTilt() {
   console.log("handleTilt called");
   var sceneEl = document.querySelector("a-scene");
   var elCamera = sceneEl.querySelector("#rotationCam");
   var camRotation = elCamera.getAttribute('rotation');
   var xTilt = camRotation['x'];
   var fov = elCamera.getAttribute('fov');
   var minTilt = -65 + fov/2;
   camRotation['x'] = xTilt > minTilt ? xTilt : minTilt;
   // enforce maximum (straight up) 
   if (camRotation['x'] > 90) {
       camRotation['x'] = 90;
   }
   console.log(camRotation);
} 

事件处理程序设置在以下行中：

  <a-entity geometry="primitive:sphere" id="clickSphere" 
    radius="50" position="0 0 0" mousemove="handleTilt()">

执行此操作时，clickSphere上的console.log调用显示事件处理程序存在。但当我运行程序并移动鼠标将相机拖动到不同角度时，它从未被调用

作为替代方案，我让clickSphere监听onClick，如下所示：

  <a-entity geometry="primitive:sphere" id="clickSphere" 
    radius="50" position="0 0 0" onclick="handleTilt()">

唯一的变化是鼠标移动到onclick。现在，每次单击都会执行handleClick函数，如果摄影机旋转到小于最小值的值，则会将其放回最小值

然而，有一件奇怪的事，在点击并调整了几次旋转后，程序进入了一种状态，我无法再将相机旋转到最小值以下。这就好像mousemove监听器已经开始使用了，即使唯一编码的监听器是onclick。我一辈子都搞不懂为什么会这样

有没有可能得到一些关于我可能做错了什么的建议，或者一个故障排除计划？我不熟悉框架和JavaScript

---

另一种实时执行最小和最大摄像机倾斜的替代方案也是可以接受的解决方案。

我刚刚在文档中为ya推出了这一部分：

虽然A-Frame的“外观控制”组件主要用于虚拟现实，具有跨平台工作的合理默认设置，但许多开发人员希望将A-Frame用于非虚拟现实用例，例如桌面、触摸屏。我们可能需要修改鼠标和触摸行为

配置行为的最佳方法是复制和自定义当前外观控件组件代码。这允许我们配置我们想要的控制方式，例如，限制触摸时的俯仰，反转一个轴。如果我们将所有可能的配置都包含到核心组件中，那么我们将保留大量的标志

该组件位于Browserify/Webpack上下文中，因此您需要将require语句替换为a-Frame全局变量，例如AFRAME.registerComponent、window.THREE、AFRAME.constants.DEFAULT\u CAMERA\u HEIGHT，并去掉module.exports

---

可以修改为仅为鼠标/触摸而修改最小值/最大值。

这里只是一些警告，A-Frame是一个VR框架，强烈建议不要从HMD控制旋转。如果你正在构建一个非虚拟现实应用程序，那就继续吧！实际上，它最终将用于HMD。我只是没有一个用于测试的框架，并且错误地认为我可以通过在桌面上复制功能来更好地熟悉该框架。我将查看HMD控件，看看它们是否以简单的方式处理最小和最大倾斜。a-Frame也故意不允许HMD使用最小/最大倾斜，因为这对用户来说非常不舒服。更好的选择可能是将屏幕淡入黑色，例如，如果用户走出房间，则使用雾。对于旋转，我认为您只需要根据用户可以/将要查看的知识规划场景。用户看到的东西的旋转应始终与他们头部的实际动作相匹配，否则可能会引起恶心。^这适用于外观控制。正如凯文在下面写到的，你可以用叉子叉出不同的组件。以前制作的jpg cube从二战的航空母舰上安装了内部装潢！包括许多在天花板或地板上有一个黑色圆圈的。他们的显示程序强制执行倾斜限制：对于鼠标和桌面浏览器的查看来说，这不是一个令人恶心的问题。但我们的合同是针对VR/AR应用程序的。我们可能不得不回到拍摄自己照片的最初计划。我的决定被老板激怒了！