aframe - how enforce max/min camera tilt

Question

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.

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.)

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.

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.

 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);
}

The event handler is set up in this line:

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

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.

As an alternative, I made the #clickSphere listen for onClick as follows:

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

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.

One bizarre thing, though, after clicking and adjusting the rotation a few times, the program goes into a state where I can't 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.

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.

An alternative plan for enforcing the min and max camera tilts in real time would also be an acceptable solution.

Just some warning here, A-Frame is a VR framework, and taking control of rotation away from the HMD is strongly not recommended. If you're building a non-VR app then carry on! — Don McCurdy
Actually, it will eventually be for HMD. I just don't have one for testing and was thinking (mistakenly) that I could get better acquainted with the framework by replicating functions on desktop. I'll look at the HMD controls and see if they handle min and max tilts in a straightforward way. — Phil Freihofner
A-Frame doesn't allow min/max tilts with the HMD either, intentionally, because it is very uncomfortable for users. A better option might be to fade the screen black (e.g. using fog) if the user is stepping outside of the room. For rotation, I think you just need to plan your scene with the knowledge that users can/will look around. The rotation of what the user sees should always match what their head is physically doing, or you risk causing nausea. — Don McCurdy
^This applies to look-controls. As Kevin writes below, you can fork that component to behave differently. — Don McCurdy
Previously made jpg cube sets (interiors from a WWII Air Craft Carrier!) include many that have a black circle at the ceiling or floor. Their display program enforces tilt limits: not a nausea problem for mouse and desktop browser viewing. But our contract is for a VR/AR application. We may have to go back to original plan of shooting our own pics. Decision gets kicked up to my boss! — Phil Freihofner

ngokevin ngokevin · Accepted Answer · 2017-09-18T21:56:39

I just pushed out this piece on the docs for ya: https://aframe.io/docs/0.6.0/components/look-controls.html#customizing-look-controls

While A-Frame’s look-controls component is primarily meant for VR with sensible defaults to work across platforms, many developers want to use A-Frame for non-VR use cases (e.g., desktop, touchscreen). We might want to modify the mouse and touch behaviors.

The best way to configure the behavior is to copy and customize the current look-controls component code. This allows us to configure the controls how we want (e.g., limit the pitch on touch, reverse one axis). If we were to include every possible configuration into the core component, we would be left maintaining a wide array of flags.

The component lives within a Browserify/Webpack context so you’ll need to replace the require statements with A-Frame globals (e.g., AFRAME.registerComponent, window.THREE, AFRAME.constants.DEFAULT_CAMERA_HEIGHT), and get rid of the module.exports.

Can modify https://github.com/aframevr/aframe/blob/master/src/components/look-controls.js to hack in your min/max just for mouse/touch.

aframe - how enforce max/min camera tilt

1 Answers