title: aframe - how enforce max/min camera tilt
body: <p>I have six planes set up as cube with textures to display a 360-degree jpg set. I positioned the planes 1000 away and made them 2000 (plus a little because the photos have a tiny bit of overlap) in height and width.</p>
  
  <p>The a-camera is positioned at origin, within this cube, with wasd controls set to false, so the camera is limited to rotating in place. (I am coding on a laptop, using mouse drag to move the camera.)</p>
  
  <p>I also have a sphere (invisible), placed in between the camera and the planes, and have added an event listener to it. This seemed simpler than putting event listeners on each of the six planes.</p>
  
  <p>My current problem is wanting to enforce minimum and maximum tilt limits. Following is the function "handleTilt" for this purpose. The minimum tilt allowed depends on the size of the fov.</p>
  
  <pre><code> 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 &gt; minTilt ? xTilt : minTilt;
     // enforce maximum (straight up) 
     if (camRotation['x'] &gt; 90) {
         camRotation['x'] = 90;
     }
     console.log(camRotation);
  } 
  </code></pre>
  
  <p>The event handler is set up in this line:</p>
  
  <pre><code>  &lt;a-entity geometry="primitive:sphere" id="clickSphere" 
      radius="50" position="0 0 0" mousemove="handleTilt()"&gt;
  </code></pre>
  
  <p>When I do this, a console.log call on #clickSphere shows the event handler exists. But it is never invoked when I run the program and move the mouse to drag the camera to different angles.</p>
  
  <p>As an alternative, I made the #clickSphere listen for onClick as follows:</p>
  
  <pre><code>  &lt;a-entity geometry="primitive:sphere" id="clickSphere" 
      radius="50" position="0 0 0" onclick="handleTilt()"&gt;
  </code></pre>
  
  <p>The only change is "mousemove" to "onclick". Now, the "handleClick()" function executes with each click, and if the camera was rotated to a value less than the minimum, it is put back to the minumum.</p>
  
  <p>One bizarre thing, though, after clicking and adjusting the rotation a few times, the program goes into a state where I <em>can't</em> rotate the camera down below the minimum any more. It is as if the mousemove listener had become engaged, even though the only listener coded is the onclick. I can't for the life of me figure out why this kicks in.</p>
  
  <p>Would it be possible to get some advice as to what I might be doing wrong, or a plan for troubleshooting? I'm new to aframe and JavaScript.</p>
  
  <p>An alternative plan for enforcing the min and max camera tilts in real time would also be an acceptable solution.</p>