Implement better heuristic to enable user interactions than basic focus

As of #288 , we began blocking user interaction unless a <model-viewer> has focus. This enables users to interact with the page in more natural ways (such as scrolling while passing over <model-viewer>) at the cost of requiring explicit interaction to focus <model-viewer> before the controls would work.

@mrdoob immediately pointed out that this was not very intuitive when interacting, especially on mobile. @yuinchien also pointed out the same, and has prototyped some potential alternative heuristics to decide if <model-viewer> should be interactive.

This issue covers discussion and work necessary to enable improved detection of explicit user interactions with <model-viewer> so that it feels intuitive without disrupting other activities such as scrolling the page.

[yuinchien]

I played with horizontal gesture detection on <model-viewer>, as @cdata pointed out, most of the mobile page scroll is vertical, allowing auto-focus to happen when detecting user interaction feels a lot more accessible.

const modelViewer = $('#demo-1');
let startX;
let startY;
let isFocused = false;
const THRESHOLD_X = 30;

function onTouchStart(e) {
  let touchobj = e.changedTouches[0];
  startX = touchobj.pageX;
  startY = touchobj.pageY;
}

function onTouchMove(e) {
  let touchobj = e.changedTouches[0];
  if( Math.abs(touchobj.pageX-startX)>THRESHOLD_X && !isFocused) {
      modelViewer.focus();
  }
}

function onFocus() {
  isFocused = true;
}
function onBlur() {
  isFocused = false;
}

modelViewer.addEventListener("focus", onFocus);
modelViewer.addEventListener("blur", onBlur);
modelViewer.addEventListener("touchstart", onTouchStart, false);
modelViewer.addEventListener("touchmove", onTouchMove, false);

[elalish]

One possible solution would be to route touch events to the model regardless of focus, but to reroute those events back to the page when the model limits are hit (high/low elevation, near/far zoom) so that the page can still be scrolled and pinched. The downside is that it would have a bit of sudden mode shift, but it seems fairly consistent with the way scrolling works on pages with scrollable sub-elements. What does our resident expert think @yuinchien?