Question

我将六个平面设置为具有纹理的立方体，以显示360度的jpg集。我把飞机放置了1000个，并在高度和宽度上制作了2000（加上一点因为照片有一点点重叠）。

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

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

我目前的问题是希望强制执行最小和最大倾斜限制。以下是用于此目的的函数“handleTilt”。允许的最小倾斜度取决于fov的大小。

 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()">

唯一的变化是“mousemove”到“onclick”。现在，“handleClick（）”函数会在每次单击时执行，如果将相机旋转到小于最小值的值，则会将其重新设置为最小值。

然而，有一件奇怪的事情是，在点击并调整旋转几次之后，程序进入一种状态，我无法将相机向下旋转到最小值以下。就好像鼠标移动监听器已经订婚一样，即使唯一的监听器是onclick。我不能为我的生活弄清楚为什么会这样踢。

是否有可能就我可能做错的事情或故障排除计划得到一些建议？我是aframe和JavaScript的新手。

实施最小和最大相机倾斜的替代方案也是一种可接受的解决方案。

Answer 1

我刚刚在ya：https://aframe.io/docs/0.6.0/components/look-controls.html#customizing-look-controls

的文档中推出了这篇文章

虽然A-Frame的外观控制组件主要用于具有合理默认值的VR以跨平台工作，但许多开发人员希望将A-Frame用于非VR用例（例如，桌面，触摸屏）。我们可能想要修改鼠标和触摸行为。

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

该组件位于Browserify / Webpack上下文中，因此您需要用A-Frame全局变量替换require语句（例如，AFRAME.registerComponent，window.THREE，AFRAME.constants.DEFAULT_CAMERA_HEIGHT），并删除module.exports。

可以修改https://github.com/aframevr/aframe/blob/master/src/components/look-controls.js来攻击你的最小/最大值只是为了鼠标/触摸。

aframe - 如何强制最大/最小相机倾斜

1 个答案: